Go Main page
Go Main page

Web components

cover

components

TagV2

v.1.0.0 | Saturn

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

This component will replace the current Tag component in the next major version.

import { TagV2 } from '@kubit-ui-web/react-components'
1
<TagV2 variant="HEALTHY" label={{content: 'LABEL'}} />

Variant

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.

123456
<TagV2 variant="HEALTHY" label={{content: 'LABEL'}} />
<TagV2 variant="DORMANT" label={{content: 'LABEL'}} />
<TagV2 variant="ISSUE" label={{content: 'LABEL'}} />
<TagV2 variant="CODE"label={{content: 'LABEL'}} />
<TagV2 variant="DEPRECATED" label={{content: 'LABEL'}} />
<TagV2 variant="INFORMATIVE" label={{content: 'LABEL'}} />