Components

components

Tag

v.1.0.0 | Saturn

Usage

import { Tag } from '@kubit-ui-web/react-components'

123

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

Let's delve into the versatility of the tag component by examining all its avalaible props.


Property	Type	Default	Description
variant Required	String	-	Variant
status Required	String	-	State of tag
option Required	String	-	Allow to extend variant's styles
children Required	ReactNode	-	Content
icon	IElementOrIcon	-	Icon
truncateText	String	-	It indicates if text should be truncated
aria-label	String	-	aria-label label for tag
aria-labelledby	String	-	aria-labelledby label for tag
aria-describedby	String	-	aria-describedby label for tag
aria-disabled	Boolean	-	aria-disabled label for tag
dataTestId	String	-	Test id
ctv	TagStateKeyOfType	-	Modify styles for the default version of the component
extraCt	TagStylesOptionPropsType	-	Modify styles for the default version of the component