Tag

Short labels, often for filters

Demo

Legacy color values

The palette-named color values below still work and render the same colors as their corresponding spec role. Prefer the role-based names above for new code.

API

Tag

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

Attributes

Name Value Required Description

Name	Value	Required	Description
`color`	String		Valid values for this attribute: `in-progress` `positive` `warning` `error` `neutral` `completed` `other` `inactive` `amended` Legacy palette-named values are also accepted and map to the role above with the matching spec colors: `red-lighter`, `red-dark` → error; `yellow-light`, `yellow-medium` → warning; `green-darker`, `green-dark` → completed; `green-lighter` → positive; `blue-lighter`, `blue-light` → in-progress; `purple-lighter` → amended; `gray-dark`, `gray-darker` → inactive. Three palette-named values have no spec role and render their original colors: `orange-light`, `green-light`, `gray-lightest`/`gray-lighter`.
`aiassisted`	Boolean		Displays an AI-assisted icon in the tag component to indicate AI-powered functionality.

color

String

Valid values for this attribute:

in-progress
positive
warning
error
neutral
completed
other
inactive
amended

Legacy palette-named values are also accepted and map to the role above with the matching spec colors: red-lighter, red-dark → error; yellow-light, yellow-medium → warning; green-darker, green-dark → completed; green-lighter → positive; blue-lighter, blue-light → in-progress; purple-lighter → amended; gray-dark, gray-darker → inactive. Three palette-named values have no spec role and render their original colors: orange-light, green-light, gray-lightest/gray-lighter.

aiassisted

Boolean

Displays an AI-assisted icon in the tag component to indicate AI-powered functionality.

Properties

Name Value Required Description

Name	Value	Required	Description
`color`	String		Valid values for this prop: `in-progress` `positive` `warning` `error` `neutral` `completed` `other` `inactive` `amended` Legacy palette-named values are also accepted (see attribute description above).
`aiAssisted`	Boolean		Displays an AI-assisted icon in the tag component to indicate AI-powered functionality.

color

String

Valid values for this prop:

in-progress
positive
warning
error
neutral
completed
other
inactive
amended

Legacy palette-named values are also accepted (see attribute description above).

aiAssisted

Boolean

Displays an AI-assisted icon in the tag component to indicate AI-powered functionality.

Slots

Name	Required	Description
`content`		Text content

Demo

API

Tag

Name
`<STag>`

Props

Name Value Required Description

Name	Value	Required	Description
`color`	String		Valid values for this prop: `in-progress` `positive` `warning` `error` `neutral` `completed` `other` `inactive` `amended` Legacy palette-named values are also accepted (see Web Components section above).
`aiAssisted`	Boolean		Displays an AI-assisted icon in the tag component to indicate AI-powered functionality.

color

String

Valid values for this prop:

in-progress
positive
warning
error
neutral
completed
other
inactive
amended

Legacy palette-named values are also accepted (see Web Components section above).

aiAssisted

Boolean

Displays an AI-assisted icon in the tag component to indicate AI-powered functionality.

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