Tag

Label content categories or statuses.

Basic usage

defaultprimarysuccessinfowarningerror

PublishedCompletedDismissibleLarge tag

basic.tsx

import { Flex, Space, Tag } from '@ifhover/leaf-ui';

import { Check } from 'lucide-react';

export function TagBasic() {
  return (
    <Space direction="vertical" align="stretch">
      <Flex gap="md" align="center" wrap justify="center">
        {(['default', 'primary', 'success', 'info', 'warning', 'error'] as const).map((color) => (
          <Tag key={color} color={color}>
            {color}
          </Tag>
        ))}
      </Flex>
      <Flex gap="md" align="center" wrap justify="center">
        <Tag color="primary" variant="solid">
          Published
        </Tag>
        <Tag color="success" icon={<Check />}>
          Completed
        </Tag>
        <Tag color="#7654c6" closable>
          Dismissible
        </Tag>
        <Tag size="lg" color="primary">
          Large tag
        </Tag>
      </Flex>
    </Space>
  );
}

Tag API

Prop	Type	Default	Description
`children`	`ReactNode`	—	Tag content
`color`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'error' \| 'info' \| string`	`'default'`	Semantic or custom color
`variant`	`'soft' \| 'solid'`	`'soft'`	Tinted or solid appearance, both borderless with small rounded corners
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tag size
`icon`	`ReactNode`	—	Leading icon
`closable`	`boolean`	`false`	Show 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, CheckableTagProps, TagGroupProps, TagOption } from '@ifhover/leaf-ui';

Usage notes

Tags use borderless fills and small rounded corners, with tinted and solid appearances. The radius follows the regional theme; set ConfigProvider's theme.components.Tag.borderRadius for a component override.

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

CheckableTagProps API

Property	Type	Default	Description
`checked`	`boolean`	—	Controlled checked state
`defaultChecked`	`boolean`	`false`	Initial checked state
`onChange`	`(checked: boolean) => void`	—	Value change callback
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size or spacing preset

TagGroupProps API

Property	Type	Default	Description
`options`	`readonly TagOption[]`	Required	Available options
`value`	`readonly string[]`	—	Controlled value
`defaultValue`	`readonly string[]`	`[]`	Initial value, restored by uncontrolled form resets
`onChange`	`(values: string[]) => void`	—	Value change callback
`disabled`	`boolean`	—	Disable interactions
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size or spacing preset
`name`	`string`	—	Form field name
`form`	`string`	—	Associated form ID
`required`	`boolean`	—	Required form validation

TagOption API

Property	Type	Default	Description
`value`	`string`	Required	Controlled value
`label`	`ReactNode`	Required	Display label
`disabled`	`boolean`	—	Disable interactions

#Tag

#Basic usage

#Tag API

#Types

#Usage notes

#CheckableTagProps API

#TagGroupProps API

#TagOption API