H1 Header Dark
H2 Header Dark
H3 Header Dark
H4 Header Dark
Icon (situational): Serves to give more context to the badge. E.g avatar, logo, or icon.
Container: Takes on the length of the text and/or icons within the badge.
Text: Text can be an entity name, description, tag, action, or conversational.
Length of the text is expandable
Icon (situational): Input can include a Remove icon.
Within the badge
Ensure that there is a min of 4px vertical spacing and 8px horizontal spacing within the badge
and 6px spacing between icons and text. Base height 24px.
Badges should be used:
- To give a status update on a piece of information or action.
- When you want to highlight something.
Badges should not be used:
When users are likely to confuse a badge with a small button,
badges should not be clickable especially when they appear in the same area of the page as buttons.
Avoid long sentences
Minimize badge text length to one- to three-words. Content should be clear and concise, and easy to identify.
Users may confuse badges as buttons
Avoid triggering interaction with a badge as they may be confused as small buttons
Badges should include tooltips, where necessary, to enhance user understanding.
For example, a badge is used in conjunction with an icon.
Badge design tokens