Skip to content

Tags

Experimental

Tags is used to render one or more tags. Unlike Badges, tags are always linked.

Examples

Tags align start (left) by default:

You can align center:

Or align end (right):

When you have many tags they wrap:

You can still align center:

Or align end:

You can adjust the gap:

If you provide an empty values array, the component will not be rendered:

System props

Tags supports space props and color props from Styled System.

Component props

NameTypeDefaultRequiredDescription
valuesArray of shapeArray of objects. Each object has a tag and a path prop.
gapNumber2Gap between badges (from space scale).
alignstart, center or endstartAlignment (responsive).
variantStringtags.primaryOptional variant for customizations.

Variants

If you do not provide a variant prop, tags are rendered with the defaults from Theme UI's Badge. You can define your own variants under any key and provide that key to variant. But it is recommended to define custom variants under the tags key.

In this example we customize the corners of the tags using default variant tags.primary:

In this example we define variant tags.secondary and apply it to Tags:

Visual regression testing

The following URLs can be used for visual regression testing: