Badge
Small labels which hold small amounts of information, system feedback, or states.
Props
type
GoabBadgeType
Sets the context and colour of the badge.
ariaLabel
string
Accessible label for screen readers.
emphasis
GoabBadgeEmphasis
Sets the visual emphasis. 'subtle' for less prominent, 'strong' for more emphasis.
Defaults to
strong.
iconType
GoabIconType
Icon type to display in the badge.
size
GoabBadgeSize
Sets the size of the badge.
Defaults to
medium.
testId
string
Sets a data-testid attribute for automated testing.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
ReactNode
content
ReactNode
Content displayed in the badge. Accepts a string or ReactNode for custom content.
Card view of case files
Filter a list using a push drawer
Filter data in a table
Set a specific tab to be active
Show different views of data in a table
Show multiple actions in a compact table
Show multiple tags together
Show status in a table
Show status on a card
Other
Don't
Don't use a primary button to edit a badge.
Do
Use badges for information and organization, not interactivity.
Do
Use a tertiary button next to a badge if it needs to be manually updated.
Types
Don't
Don't style badges to look like buttons.
Don't
Don't use interactive colours. These are reserved for links, buttons, and other interactive elements.
Do
Match badge type to the status it represents
Tip
FilterChip is for removable filters that users can dismiss. For static labels or status indicators, use Badge instead.
Content
Do
Use sentence case for badge text. Capitalize the first word only.
Do
Use short, concise text in badges.
Screen Readers
Icon-only interactive elements must have an accessible label so screen reader users understand their purpose.
For IconButton: The ariaLabel prop is required.
// Good - describes the action
<GoabIconButton icon="trash" ariaLabel="Delete item" />
// Bad - no label for screen readers
<GoabIconButton icon="trash" />For Badge with icon only: Provide ariaLabel when there’s no visible text.
<GoabBadge icon="warning" ariaLabel="Warning" type="important" />For Icon: Use ariaLabel when the icon conveys meaning, not just decoration.
The label should describe:
- What action happens (for buttons): “Delete”, “Edit”, “Close”
- What the icon represents (for informational icons): “Warning”, “Success”
Don't
Don't use icon-only elements without an accessible label
Warning
When using an icon-only badge, ariaLabel is required so screen readers can identify it.
