- 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
beforeprop. More information about using icons can be found in this example.
|children||The content of the Tag|
|variant||outlined||The visual style of the Tag|
|severity||info||The level of severity for the Tag|
|before||new||Content shown before the Tag content|
- Tag is a straight-forward component that does not require special consideration for accessibility.
warning-500as a background color does not meet our accessibility standards.
- All other color combinations meet our accessibility standards.
Two interactive versions are available for very specific use cases:
render(<Tag>Hi</Tag>);const tag = screen.getByText('Hi');expect(tag).toBeInTheDocument();