<img src="https://img.icons8.com/ios/250/000000/info.png" alt="https://img.icons8.com/ios/250/000000/info.png" width="40px" /> Small label above another component
Inspect on Sketch Cloud →
Badges have many possible uses:
- Emphasise—Call attention to a small amount of information related to text beneath it. For example, the date associated with an event listing.
- Categorise or tag—Badges can act as tags and inform users what type of content they can expect to see after clicking on the associated link.
- Flag—Using a badge with text such as "new" can highlight your new content to repeat users.
Content best practices
- When multiple badges can be seen at once, the badges should all fulfil the same purpose and the text within should be formatted in the same way. For example, if badges associated with events contain dates, all dates should follow the same format. If badges associated with content contain a tag like "video" or "report", then all text should be a singular noun that categorizes content or media.
- Badges work best when the text within is 1-2 words.
- A badge should never be so long that it wraps to the next line (on any size screen).
Badges have two structural variations: contained and floating.
- Badge text—Keep as short as possible without losing meaning. Badge text can be any GS1 colour that is accessible at small sizes against its background.