Tags visually label and organize statuses, metadata, and objects. Tags are capable of being added and removed by users. Numerically dominant content should use the Badge variation.
The default tag is useful for both visually highlighting and giving user interaction to an element.
Compact tags are used in areas with small screen space and dense content.
A tag can be deemphasized to reduce visual noise.
Tags are frequently paired together to form a tag group.
A tag can also be manually removed by a user.
An icon can add additional meaning to a scenario.
Tags in a form utilize Sematic UI for functionality.
A status tag highlights an item's state. There are two variants per status: bold (default) and subtle. Use the default bold variant when the status tag is important on the page, and the subtle variant for less important situations or when several competing statuses exist on the page.
The default status state.
Inactive, disabled, minor states.
Active success state.
Warning, likely requests user action.
Critical or error, likely needs user action.
A alternate background color can help with labeling and differentiation between tags. This is especially helpful for user-generated tags. The color prop can accept hexcode, rgb, and token values.
The max length of a tag's text is 270px, or about 35 characters. Tags longer than this will get cut off with ellipsis. The HTML title
attribute contains the text's full content regardless. Tags will attempt to wrap when in a Tag Group.
import { Tag, TagGroup } from '@servicetitan/design-system';