UI Kits
Feedback

Badge Set

Reusable status badges.

Usage guidance

When to use it.

Use concise messages that state what happened and what the user can do next.

Accessibility

Implementation notes.

  • Use role/status semantics where appropriate.
  • Do not make transient messages disappear too quickly.
  • Include a clear recovery action for errors.
Release QA

Implementation checklist.

0/3
Handoff notes

Implementation notes for this component.

Quick section export
<div class="ap-badges"><span class="success">Active</span><span class="warning">Pending</span><span class="danger">Overdue</span><span class="neutral">Draft</span></div>
Related components

More in Feedback