Leaf UI
  • English

      • Tag

      Label content categories or statuses.

      Basic usage

      Live previewBasic usage
      defaultprimarysuccessinfowarningerror
      PublishedCompletedDismissibleLarge tag
      basic.tsx
      import { Tag } from '@sudden3/leaf-ui';
import { Check } from 'lucide-react';
export function TagBasic() {
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <div className="leaf-demo-row">
        {(['default', 'primary', 'success', 'info', 'warning', 'error'] as const).map((color) => (
          <Tag key={color} color={color}>
            {color}
          </Tag>
        ))}
      </div>
      <div className="leaf-demo-row">
        <Tag color="primary" variant="solid">
          Published
        </Tag>
        <Tag color="success" variant="outline" icon={<Check />}>
          Completed
        </Tag>
        <Tag color="#7654c6" closable>
          Dismissible
        </Tag>
        <Tag size="lg" color="primary">
          Large tag
        </Tag>
      </div>
    </div>
  );
}

      Tag API

      PropTypeDefaultDescription
      childrenReactNode—Tag content
      color'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | string'default'Semantic or custom color
      variant'soft' | 'outline' | 'solid''soft'Visual style
      size'sm' | 'md' | 'lg''md'Tag size
      iconReactNode—Leading icon
      closablebooleanfalseShow a close button
      onClose(event: MouseEvent<HTMLButtonElement>) => void—Called on close

      Types

      Import the component props and item types when preparing your own values.

      import type { TagProps } from '@sudden3/leaf-ui';

      Usage notes

      Call event.preventDefault() to prevent removal. In a dynamic list, onClose can update application state to remove the matching item.