RhombusKit

Badge

A badge is a small count or status marker pinned to the corner of another element. [rhombusBadge] is an attribute directive that composes Angular Material's [matBadge] via hostDirectives and routes its colours through the token contract per variant — toggle the theme above and the badges re-skin without touching markup.

Example

When to use

  • Use a badge to draw attention to a count or short status on its host — an unread tally on an inbox button, a "NEW" flag on an icon.
  • When the marker belongs to another element (button, mat-icon, span) rather than standing on its own, so it should be pinned to that host's corner.

When not to use

  • For a standalone, free-standing label or tag, use a Chip — it renders as its own element rather than overlaying a host.
  • For a full inline status message with an icon and copy, use an Alert.
  • To show ongoing or determinate activity rather than a static count, use Progress.

Related components

  • Chip — standalone labels and tags.
  • Button — a common badge host.
  • Avatar — another corner-marker host.

Was this page helpful?