Tag

The ty-tag component is used for creating small, informative labels that categorize or mark content. These tags are ideal for displaying statuses, categories, or key attributes.

Usage

To use ty-tag, add it around your text or elements:

Live Editor

<ty-flex
  direction="row"
  justify="space-between"
  align="center"
  wrap="wrap"
  gap="10px"
>
  <ty-tag variant="info">Information</ty-tag>
  <ty-tag variant="success">Success</ty-tag>
  <ty-tag variant="error">Error</ty-tag>
  <ty-tag variant="warning">Warning</ty-tag>
</ty-flex>

Result

Loading...

API

Properties

Name	Description	Type	Options	Default
variant	Determines the style of the tag	String	'neutral', 'info', 'success', 'error', 'warning'	'neutral'