Badge
Open in Storybook Open in Figma
Badges are small visually-strong colourful boxes that communicate states of things.
They are based on Bootstrap’s .badge class, but this relationship has been DEPRECATED and will be removed in a future major version. You can start using .g-badge instead.
HINT George’s Badges come in one-size-fits-all and they do not change font-size depending on the context.
Regular Badges
There are five flavours of regular, rounded Badges. They extend the base class using .g-badge-* subclasses:
Rules For Designers
- Badges have no margins, but adding a white space character between two badges prevents them from touching each other.
- Badges with an outline use the text colour also for the border.
- Badges without an outline use a lighter shade of the text colour for the background.
Icon
Badges can contain an icon.
Pills
Pills are also round and used for counters. George’s flavours are triggered using the .g-pill-* variants:
.g-pill-unreadfor use in PrimaryNavigation to indicate new items.g-pill-defaultfor all other counters
Similar to regular badges, the relationship to Bootstrap’s .badge-pill class has been DEPRECATED and will be removed in a future major version. You can start using .g-pill instead.
HINT While you can put any text into pills, they are used for numbers only.
Rules For Designers
- Compared to Badges, Pills are even smaller in height, 16px instead of 20px.
- Pills have a horizontal padding of 5px and no margins.
- Text colour is
$color-white (#ffffff). - Background colours are
$color-ui-red (#cf2a1e)/$color-blue-400 (#0a285c). - Values greater than 99 are truncated by default