Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Tag

v.1.0.0 | Saturn

Usage

The name of the tokens object to style tag is TAG_STYLES.

You cannot change the name of the tokens object.

Tag component style can be configured through the variant and option prop:

Variants and Status

Each variant can have several status. status can modify the styles of the tag.

The tokens used are:

12345678
const TAG_VARIANT = {
  [STATUS]: {
    wrapper?: CommonStyleType,
    text?: TypographyTypes,
    truncateText?: TypographyTypes,
    icon?: IconTypes,
  }
}

Option

OptionTypes can modify the styles of the tag.

The tokens used are:

1234
const TAG_OPTION = {
  wrapper?: wrapper,
  text?: TypographyTypes,
}

Example

tag theme object example:

12345678910
const TAG_STYLES = {
  [VARIANT]: {
    [STATUS]: {
      wrapper: {
        border_style: 'border-style',
        border_width: 'border-width',
        padding: 'padding',
      },
      text: {
        font_variant: 'font-variant',
TagCode API
TagAccessibility