The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.


Badges are used to highlight important changes of state in an element, mark them, or draw attention to counters.


  • Use badges to highlight or differentiate key elements. However, do it with caution. Drawing attention to many pieces may result in creating much noise.
  • Badges are good for counters, for example, to show the number of new messages.
  • Badges should not provide interaction. However, its parent element may.
  • Don't use long texts within a badge. Whenever possible, limit it to a maximum of 3 words or less.
Badge types
How to use this element