No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

 




Tag


The Tag component is useful to emphasize information to the user, works best with single word values.


Zoning


Figma is not configured


Style


Figma is not configured


Variations


Example
Example
Example
Example
Example
Example


Or you can use variant props as well


Example
Example
Example
Example
Example
Example


States


Default


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum nunc non diam vehicula gravida. Pellentesque nisi velit, porttitor nec facilisis at, egestas quis magna. Sed tempus convallis orci, quis aliquet risus porta eu. In hac habitasse platea dictumst. Vestibulum porta, magna quis porta commodo, lacus elit venenatis eros, varius fringilla enim justo sed lectus. Donec at tortor imperdiet, tincidunt lacus ac, viverra nisi. Vivamus feugiat, ligula in venenatis faucibus, quam justo molestie libero, bibendum feugiat sapien turpis in neque.


Content


Tags label UI items with keywords that help organize and categorize the items or draw more attention to them.


 Do
  • Use sentence case in tag labels.
  • Use short labels on tags for easy scanning.
  • Use clear and concise text.
  • Use adjectives or nouns.
 Don't
  • Don't use verbs.
  • Don't use all caps in labels (except for acronyms).


Interaction


N/A


Accessibility


N/A


Usage


Example


NameDescriptionDefaultControl 
variant
Tag variation depending on its semantic
"warning""default""information""success""destructive""beta"
-
children
Tag content
-