Tag

Tag is used when items need to be labelled, categorized, and organized using keywords that describe them.

Imports

closable

Tag has 4 variants primary secondary outline ghost

You can add extra variants & sizes via the theme file. Checkout theming guide.

Tag comes with 3 sizes sm md lg

Tags can be closable or removable. If closable prop is passed tag will show a close icon in the suffix.

Same as buttons Tag also accepts prefix, suffix props which can be used to append or prepend content in the tag.

Suffix will only be rendered if closable is set to true

TagGroup can be used to group multiple tags together & can pass down size, variant props.

While using TagGroup, we will add roving index to the closable icons that means you can move the focus with the arrow keys.

To disable roving index on the tag closable icons you can set allowArrowNavigation=false