Guidelines
Guidelines
Size
The size property establishes a hierarchy among Badges and the components and context around them.
A Badge should:
- Use 'medium' as the default size.
- Use 'large' to align with large typography. Great to use with buttons in the size 'small'.
- Have its width reflect the amount of entered content and not have a maximum width.
- Use the same size value across all viewports.
Kind
Similar to size, the kind property establishes a hierarchy among all Badges and the components and context around them by indicating their level within this hierarchy.
A Badge should:
- Be set to have matching kind when used in a group.
- Use the 'primary' kind as the default value.
- Be set to 'secondary' kind if there is a 'secondary' call-to-action Button.
- Be set to 'primary' kind if there is a 'tertiary' call-to-action Button.
- Use 'cover-up' when placed on images. This kind of Badge is designed to be visible on any kind of image, no matter its brightness.
Shape
A Badge's shape impacts the overall look and feel of a layout. The shape is based on the platform or product's main character and target audience.
A Badge should:
- Use 'pill' shape when used on B2C platforms.
- Use 'rectangle' shape when used on B2B or B2E platforms.
States
The state of the Badge changes when the user engages with it.
A Badge should:
- Change to hover when the user reaches the hit-area, which is the whole width and height of the Badge.
Label
A Badge gives contextual information and is therefore using a label.
A label should:
- Represent a category or meta-information.
- Be available by default and never be removed from the Badge.
- Be fully disclosed and not truncated.
Prefix
A Badge can set a prefix when its meaning should be visually emphasized, e.g. through commonly used elements such as Flags, Icons, or Avatars.
A prefix should:
- Only be used if the option where the Badge is set features a prefix as well.
- Always be used in combination with a label.
- Use a size of 16 x 16 pixels for 'small' and 'medium' size and 18 x 18 pixels for 'large' size.
- Use only one single non-interactive element.
- Be uniform in size and ratio, when used in a group of Badges.
- Use the same color as the label when it is an Icon.
- Use the 'x-small' size of the Avatar to ensure the correct display of initials in case no image is available.
- Never be embedded through an iframe.
🎨 How to implement a prefix in Figma
Find a tutorial on changing prefixes in Figma, including an explanation of prefix definition and the specific sizes used in our components here.
Accessibility
A Badge should:
- Set a contrasting appearance based on the environment it's used in. Use 'light' appearance in dark environments and vice versa.