Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Tag

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Indicate status or provide additional information that needs to be highlighted visually.

This component will be replaced by the new TagV2 in the next major version.

import { Tag } from '@kubit-ui-web/react-components'
123
<Tag variant="SQUARE" option="INFORMATIVE" status="NORMAL">
  Content
</Tag>

Variant and Status

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set these predefined styles for its quick use, access them through the variant prop.

The status prop can change the variant styles for each variant. In kubit, the only predefined status is NORMAL, but you can add more according to your needs through the theme.

123456789
<Tag variant="SQUARE" option="HEALTHY" status="NORMAL">
  Content
</Tag>
<Tag variant="ARROW" option="HEALTHY" status="NORMAL">
  Content
</Tag>
<Tag variant="RIBBON" option="HEALTHY" status="NORMAL">
  Content
</Tag>

Option

The option prop can also change the component styles. There are some predefined styles. Access them through the option prop:

Healthy

12345678910
<Tag variant="SQUARE" option="HEALTHY" status="NORMAL">
  Content
</Tag>
<Tag variant="SQUARE" option="INFORMATIVE" status="NORMAL">
  Content
</Tag>
<Tag variant="SQUARE" option="DORMANT" status="NORMAL">
  Content
</Tag>
<Tag variant="SQUARE" option="ISSUE" status="NORMAL">
SkeletonAccessibility
TagDesign Specs