Skip to content
Docs
Components
Primitives
Tag

Tag

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

Imports

import { Tag } from "@adaptui/react-tailwind";
  • Tag Standalone tag component

Usage

Tag sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: sm md lg xl

Tag variants

Variants can be set using the variant prop. The default variant is solid. The available variants are: solid subtle outline

💡

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

Closable Tag

Tags can be closable or removable. If closable prop is passed tag will show a close icon in the suffix. You can override the default icon inside suffix. Tag is by default renders a button component so you can pass the clickable props directly.

Tag Prefix & 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

API Reference

Prop

Type

Default

sizeunionmd
variantunionsolid
disabledbooleanfalse
closablebooleanfalse
prefixReact.ReactNode-
suffixReact.ReactNode-
Last updated on June 6, 2023