Tag

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

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

Tag Standalone tag component

Tag sizes

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

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

export const App = props => {
  return (
    <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>
  );
};

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

export const App = props => {
  return (
    <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

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

export const App = props => {
  return (
    <div className="space-x-2">
      <Tag variant="solid">Solid</Tag>
      <Tag variant="subtle">Subtle</Tag>
      <Tag variant="outline">Outline</Tag>
    </div>
  );
};

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

export const App = props => {
  return (
    <div className="space-x-2">
      <Tag variant="solid">Solid</Tag>
      <Tag variant="subtle">Subtle</Tag>
      <Tag variant="outline">Outline</Tag>
    </div>
  );
};

💡

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

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.

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

export const App = props => {
  return <Tag closable>Removable</Tag>;
};

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

export const App = props => {
  return <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.

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

export const App = props => {
  return (
    <div className="space-x-2">
      <Tag prefix={<SlotIcon />}>Search</Tag>
      <Tag closable suffix={<SlotIcon />}>
        Search
      </Tag>
    </div>
  );
};

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

export const App = props => {
  return (
    <div className="space-x-2">
      <Tag prefix={<SlotIcon />}>Search</Tag>
      <Tag closable suffix={<SlotIcon />}>
        Search
      </Tag>
    </div>
  );
};

💡

Suffix will only be rendered if closable is set to true

API Reference

Prop	Type	Default
`size`	`union`	`md`
`variant`	`union`	`solid`
`disabled`	`boolean`	`false`
`closable`	`boolean`	`false`
`prefix`	`React.ReactNode`	-
`suffix`	`React.ReactNode`	-

Last updated on July 26, 2022

Tag

Imports

Usage

Tag sizes

Tag variants

Closable Tag

Tag Prefix & Suffix

API Reference

Tag

Imports#

Usage#

Tag sizes#

Tag variants#

Closable Tag#

Tag Prefix & Suffix#

API Reference#

Imports

Usage

Tag sizes

Tag variants

Closable Tag

Tag Prefix & Suffix

API Reference