Tag

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

Imports#

import { Tag } from "@renderlesskit/react-tailwind";

• Tag Standalone tag component

Usage#

<Tag>Click me</Tag>

Tag sizes#

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

<div className="space-x-2">
  <Tag size="sm">Small</Tag>
  <Tag size="md">Medium</Tag>
  <Tag size="lg">Large</Tag>
  <Tag size="xl">Extra Large</Tag>
</div>

Tag variants#

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

<div className="space-x-2">
  <Tag variant="solid">Solid</Tag>
  <Tag variant="subtle">Subtle</Tag>
  <Tag variant="outline">Outline</Tag>
</div>

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 closable>Removable</Tag>

Tag Prefix & Suffix#

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

<div className="space-x-2">
  <Tag prefix={<SlotIcon />}>Search</Tag>
  <Tag closable suffix={<SlotIcon />}>
    Search
  </Tag>
</div>

API Reference#