A badge is a small, supplementary UI element that indicates status, notification count, or additional information about another UI element.

Base Components


A badge is a small UI element indicating status, notification count, or additional information.

When should you use them?

Use badges to highlight new messages, notifications, or statuses that require user attention.

How should you use them?

  • Keep badges simple and easy to understand.
  • Use contrasting colors to ensure badges are noticeable.
  • Avoid overloading the interface with too many badges.
  • Ensure badges are accessible, with proper labeling for screen readers.
  • Provide clear context for what each badge represents.

No previous post
Up next

No next post