Skip to content
Gusto’s condensed “G” logoWorkbench

Tag

Tag is a static component used to call out status information to the user.

Figma logo
  • Tag is a static component and not meant to contain an action or be linked.
  • Tags should not be used in Gusto’s left nav.
  • Choose tag variant based on purpose and priority of the content or feature.
  • Use Outlined for communicating status or progress on a task or workflow.
  • Filled tags should be used sparingly since they are designed to draw a user to something that needs attention.
  • Tags are intended to be temporary and should be removed when no longer needed (the date has passed, the issue is resolved, an alert is viewed, etc.).
  • Tag labels should be written in sentence case and ideally be no longer than 14 characters.
  • Icons can be added to a Tag with the before prop. More information about using icons can be found in this example.

Outlined tags have the same level of visual priority and are intended to draw less attention.

Filled tags are bold and intended to grab a user’s attention.

Icons are left aligned and can be used with all tag variants. When conveying status or state (like error, warning, and success), use these common conventions for consistency.

React props
NameTypeDefaultDescription
children  ReactNodeThe content of the Tag
variant  filledoutlinedoutlinedThe visual style of the Tag
severity  errorinfowarningsuccessinfoThe level of severity for the Tag
before  ReactNodenewContent shown before the Tag content

Two interactive versions are available for very specific use cases:

The following testing snippet(s) offer suggestions for testing the component using React Testing LibraryExternal link with occasional help from JestExternal link.

render(<Tag>Hi</Tag>);


const tag = screen.getByText('Hi');


expect(tag).toBeInTheDocument();