Tag

Use Tag

Tag is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, Tag } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Tag onRemove={() => { /* Update the host collection. */ }}>Design</Tag>
    </FloodRoot>
  );
}

Design notes

• Tag is a label, not a status Badge or a selection toggle. The host owns removal; onRemove never hides the element automatically. Use ordinary noninteractive label content.
• Plain text gets a default Remove label. Rich content needs explicit removeLabel. disabled prevents removal; size and decorative icon are independent. removeButtonProps customizes the nested native action while Tag owns type, name, disabled and removal.
• Standalone removal is an ordinary Tab stop. MultiSelect supplies its composite keyboard model. Geometry uses relative Flood sizing; long labels wrap and touch targets remain distinct. Available in 0.2.5.

API reference