Tag
Tags help people filter content or see metadata at a glance.
- Use tags to show options for a specific context
- Five types: filled, outline, square, pill, or closable
- Use any non-actionable palette or gradient style
Examples
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Guildelines
Tags aren't buttons
Tags and buttons are similar; they both provide visual cues to prompt users to take actions and make selections.
However, while buttons are expected to appear consistently and with familiar calls to action, tags should be dynamic to the situation, and appear as a group of interactive or static elements.
Use tags to enhance the user's current journey and encourage action, and buttons to progress through the product and take significant actions.
Filled Tags
Filled tags have the most visual impact after the FAB, and should be used for important, final actions that complete a flow, like Save, Join now, or Confirm.
Outline Tags
Outline tags are used for secondary actions on a page, like Cancel or Close. They should be used for actions that are less important than the primary action on the page.
Square Tags
Sqaure tags are used for actions that are used as an alternate themed Default.
Pill Tags
Pill tags are used for actions that are used as an alternate themed Default.
Closable Tags
Closable tags are used for actions that are used as an alternate themed Default.
Responsive Layouts
When scaling layouts for large screen devices, tags can adapt their visual presentation, alignment, and arrangement to fit different contexts and user needs.
On this page
import { Tag } from '@cerberus/react'Usage
You can mix and match all of the examples to create the tag style of your choosing.
With Icon
Closable
To use a closable tag, just pass an onClick prop to the Tag component.
Customization
You can customize the tag by utilizing the cx function.
API
export type StaticTagProps = HTMLAttributes<HTMLSpanElement> & TagVariantProps & { onClick?: never }
export type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & { gradient?: never palette?: never onClick: MouseEventHandler<HTMLSpanElement> shape?: never usage?: never}
export type TagProps = StaticTagProps | ClickableTagProps
define function Tag(props: PropsWithChildren<TagProps>): ReactNodeProps
The Tag component accepts the following props:
| Name | Default | Description |
|---|---|---|
| gradient | undefined | The gradient of the tag (overrides palette). |
| palette | page | The color palette of the tag (overrides gradient). |
| usage | filled | The style treatment of the tag. |
| shape | square | The shape of the tag. |
| onClick | undefined | How to create a Closable tag. |
On this page
Use Cases
- Users should be able to:
- Use a tag to perform an action
- Navigate to a tag with keyboard or switch input
- Activate a tag with keyboard or switch input
Interaction & Style
Tags are often clustered components that need to pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of like components.
A tag that performs an action should present the same semantics as a button to a platform's accessibility API.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) tag |
| Space / Enter | Activates the (non-disabled) tag |
On this page