<aside> <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 →


Badge guidance

Badges have many possible uses:

  1. Emphasise—Call attention to a small amount of information related to text beneath it. For example, the date associated with an event listing.
  2. 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.
  3. Flag—Using a badge with text such as "new" can highlight your new content to repeat users.

Content best practices

Badge structure

Badges have two structural variations: contained and floating.


  1. 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.