Tag component is utilized to label, categorize, or organize items using descriptive keywords.

Anatomy

Import the component.

import { Tag } from "@rafty/ui";

<Tag />;

Usage

Tag text

<Tag>
  Tag text
</Tag>

Sizes

There are 3 size options in spinner: sm, md (default) & lg.

Tag text

<div className="space-y-2">
  <Tag size="sm">
    Tag text
  </Tag>
  <Tag size="md">
    Tag text
  </Tag>
  <Tag size="lg">
    Tag text
  </Tag>
</div>

ColorScheme

There are 5 colorScheme options available: primary, secondary (default), error, success & warning.

Tag text

<div className="space-y-2">
  <Tag colorScheme="primary">
    Tag text
  </Tag>
  <Tag colorScheme="success">
    Tag text
  </Tag>
  <Tag colorScheme="warning">
    Tag text
  </Tag>
  <Tag colorScheme="error">
    Tag text
  </Tag>
</div>