Badges

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

Base Components

Overview

A badge is a small UI element indicating status, notification count, or additional information.
https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FGl3138LYJ71TKOZEC0F8nJ%2FShipfaster-UI---v2.7.1-(LIVE)%3Fnode-id%3D83-6566%26t%3DpA8X0YmO6d7F2SMU-1

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

No previous post
Up next

No next post