4.33.0

Tag

Short labels, often for filters

Demo

API

Tag

Name Description
<s-tag> Custom HTML tag, accepts a short string and an icon as content

Attributes

Name Value Required Description
color String

Valid values for this attribute:

  • red-dark
  • orange-light
  • yellow-medium
  • green-dark
  • green-light
  • blue-lighter
  • gray-lighter
  • gray-darker
iconname String

Specifies an icon to displayed inside the tag.

Properties

Name Value Required Description
color String

Valid values for this attribute:

  • red-dark
  • orange-light
  • yellow-medium
  • green-dark
  • green-light
  • blue-lighter
  • gray-lighter
  • gray-darker
iconName String

Specifies an icon to displayed inside the tag.

Slots

Name Required Description
content

Text content

Demo

API

Tag

Name
<STag>

Props

Name Value Required Description
color String

Valid values for this prop:

  • red-dark
  • orange-light
  • yellow-medium
  • green-dark
  • green-light
  • blue-lighter
  • gray-lighter
  • gray-darker
iconName String

Specifies an icon to displayed inside the tag.

Slots

Name Required Description
content

Text content

Skylab React links

General information about using our React package

Guidelines

Accessibility

If there is more than one tag on the page with the same text in it, they need to be distinguished from one another. This can be done by adding aria-describedby to the tag which points to the id of a static text element on the page which distinguishes it.

Short labels

Use short, single-word values when possible. Users should be able to quickly identify keywords in a set of Tags and longer values make this difficult.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com