Homecomponentsinformational

Tag

A generic visual aid to add supplemental information.

Use StatusTag if you're looking to display statuses.

Use Tag to show a generic tag, e.g., show promotional tags like "Save 4%" or "New".

New on StarOfService
Rare Find
Full refund
Online
New
Save 4%
Remote job
Open in Playroom

With Icons

Use the icon property to add an icon to the tag.

New on StarOfService
Rare Find
Full refund
Online
New
Save 4%
Remote job
New on StarOfService
Rare Find
Full refund
Online
New
Save 4%
Remote job
Open in Playroom

With Icon Only

You can omit label property to show icon only. It is recommended to use the tip property when not using label to explain the meaning to the user.

With Tooltip

Use the tip property to add a tooltip to the tag.

Save 4%
Open in Playroom

API

color
Required
The color of the tag.
TagColor
weight
The weight of the tag.
TagWeight
label
The label of the tag.
string
tip
The tip to display.
string
icon
An optional icon to show before the label.
IconComponent
data
An object with the data keys and values.
DataAttributeMap
Table of Contents
With Icons
With Icon Only
With Tooltip
API