NameThatUIPattern diagnostic

presentation form · Feedback and notices

Badge

A compact label or counter that communicates status, count, or category on or near another element without being a full interactive control.

Badge behavior diagram
reviewpublishedV1 field note

Decisive boundary

A badge communicates a state attached to another element. Do not use it as a standalone button or a primary content label.

Definition and intent

What is a Badge UI pattern?

Use the behavior, not the silhouette

A compact label or counter that communicates status, count, or category on or near another element without being a full interactive control. The term is used here as a presentation form that describes placement or motion without deciding every semantic behavior. That distinction prevents a visual resemblance from silently deciding focus, keyboard, modality, or dismissal behavior.

Surface a compact status, count, or category without occupying the space of a full control. A good implementation preserves that job while making the trigger, open state, close path, and responsive behavior observable to users.

Know when the label is wrong

The fastest way to identify a pattern is often to reject the nearest alternative. For Badge, the boundary is: A badge communicates a state attached to another element. Do not use it as a standalone button or a primary content label.

Do not implement it as Button for primary actions, and Toast for transient messages. If those requirements describe the real task better, use the related pattern page or the full Feedback and notices comparison before writing code.

Decision process

Decide before choosing a component

Record these requirements in plain language. A library component name is not a substitute for the contract.

01

Confirm the user job

Surface a compact status, count, or category without occupying the space of a full control.

02

Define opening and closing

Always visible or appears when a condition changes (e.g., unread count updates). A dismissible badge variant may close on user action; read-only badges remain.

03

Specify access behavior

Badges are not focusable unless they contain a dismiss or action control. Dismissible badges provide a keyboard-operable close action; read-only badges have no interaction.

04

Reject the near miss

Button for primary actions, and Toast for transient messages.

Behavior contract

What must survive the build

trigger
Always visible or appears when a condition changes (e.g., unread count updates).
dismissal
A dismissible badge variant may close on user action; read-only badges remain.
modality
Non-modal inline presentation.
focus
Badges are not focusable unless they contain a dismiss or action control.
keyboard
Dismissible badges provide a keyboard-operable close action; read-only badges have no interaction.
interactive
Primarily informational; may include optional dismiss or click-to-navigate behavior.
persistence
Persists as long as the associated condition or status applies.
placement
Adjacent to or overlaid on the associated element.
mobile
Ensure tap targets for dismissible badges are comfortable; avoid crowding the connected element.

Failure modes

Common wrong builds

  • Using color alone without a text or accessible name.
  • Making every badge a button when it should be informative.
  • Hiding badge text from assistive technology.

Observable checks

Verify the result

  • The badge meaning is not conveyed only through color.
  • Dismissible badges have a keyboard-operable close control.
  • Status badges update without stealing focus.
  • The count or label is programmatically exposed.
  • The badge does not obscure the associated element on small screens.

Coding-agent handoff

Implementation brief template

Pattern: Badge
Purpose: Surface a compact status, count, or category without occupying the space of a full control.
Trigger: Always visible or appears when a condition changes (e.g., unread count updates).
Dismissal behavior: A dismissible badge variant may close on user action; read-only badges remain.
Modality: Non-modal inline presentation.
Focus behavior: Badges are not focusable unless they contain a dismiss or action control.
Keyboard behavior: Dismissible badges provide a keyboard-operable close action; read-only badges have no interaction.
Interactive content: Primarily informational; may include optional dismiss or click-to-navigate behavior.
Placement: Adjacent to or overlaid on the associated element.
Mobile behavior: Ensure tap targets for dismissible badges are comfortable; avoid crowding the connected element.
Do not implement as: Button for primary actions, and Toast for transient messages.
Acceptance checks:
- The badge meaning is not conveyed only through color.
- Dismissible badges have a keyboard-operable close control.
- Status badges update without stealing focus.
- The count or label is programmatically exposed.
- The badge does not obscure the associated element on small screens.

Claim-level references

Sources, not a confidence score

01BadgeMaterial Design 3 · Official design-system documentation

Badge count, dot, and label variants for notification and status

Do not stop at the label

Button for primary actions, and Toast for transient messages.

Diagnose this decision
Full clusterFeedback and notices Common alternativeToastCommon alternativeNotificationCommon alternativeBanner

Related UI patterns

How Badge differs from nearby options

Follow the behavior boundary, not a shared visual treatment.

message channel

Badge vs Toast

A brief, non-blocking message about a recent event that may disappear after users have enough time to perceive it. The key question for Toast is: If information must persist or be revisited, use Notification or Banner instead.

message channel

Badge vs Notification

A message about an event or state that may persist, include actions, and remain available beyond the immediate moment. The key question for Notification is: Notification is a channel and lifecycle concept, not a single visual shape.

presentation form

Badge vs Banner

A prominent page-level message region that persists while a condition, announcement, or required awareness remains relevant. The key question for Banner is: Do not confuse a visual banner message with the ARIA banner landmark for site-level header content.

Frequently asked questions

Badge UI pattern questions

Direct answers based on the reviewed behavior contract above.

What is a Badge in web UI?

A compact label or counter that communicates status, count, or category on or near another element without being a full interactive control. In this reference set it is a presentation form that describes placement or motion without deciding every semantic behavior.

When should I use a Badge?

Surface a compact status, count, or category without occupying the space of a full control. The decisive boundary to confirm is this: A badge communicates a state attached to another element. Do not use it as a standalone button or a primary content label.

What keyboard and focus behavior does a Badge need?

Dismissible badges provide a keyboard-operable close action; read-only badges have no interaction. Badges are not focusable unless they contain a dismiss or action control. These statements describe the reviewed expectation, but the final implementation still needs testing in the component library and browser you ship.

How should a Badge behave on mobile?

Ensure tap targets for dismissible badges are comfortable; avoid crowding the connected element. Its modality is a separate requirement: Non-modal inline presentation.

How do I verify a Badge implementation?

Start with observable checks: The badge meaning is not conveyed only through color. Dismissible badges have a keyboard-operable close control. Status badges update without stealing focus. Then verify the remaining checks and compare the result with the linked source guidance.