4.37.0

Tag

Short labels, often for filters

Demo

API

Tag

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

Attributes

Name Value Required Description
color String

Valid values for this attribute:

  • red-lighter
  • yellow-light
  • green-dark
  • green-light
  • green-lighter
  • blue-lighter
  • purple-lighter
  • gray-lightest
  • gray-dark

Properties

Name Value Required Description
color String

Valid values for this attribute:

  • red-lighter
  • yellow-light
  • green-dark
  • green-light
  • green-lighter
  • blue-lighter
  • purple-lighter
  • gray-lightest
  • gray-dark

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-lighter
  • yellow-light
  • green-dark
  • green-light
  • green-lighter
  • blue-lighter
  • purple-lighter
  • gray-lightest
  • gray-dark

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