Badge
Showing state and identity · researchedA small dot or count placed on another element to signal something new or a number.
atom · Carbon: Badge indicator · also called Badge, Counter, Indicator
"Badge" is used for status labels by Polaris and GOV.UK; Carbon's "Badge indicator" keeps the dot-or-count job distinct.
Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.
Ant Design
Badge native: no antd 6.6.5Carbon
Badge indicator subset native: no @carbon/react 1.117.0- Variants
- Badge with number, Badge without number
- Sizes
- —
- States documented
- —
- Accessibility guidance
- yes
Documented as one section of the Status indicators pattern page, not a components page. BadgeIndicator is a div and is not exported from the package index in 1.117.0; it is used through IconButton and Tabs. The accessibility section on that page covers status indicators in general.
1 corrected on re-read
- urls: {"docs_url":"https://carbondesignsystem.com/patterns/status-indicators/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/BadgeIndicator"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/patterns/status-indicators","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/BadgeIndicator"} curl -L: HTTP 200 for both; docs_url redirects to this final URL
GOV.UK
Tag subset native: no- Variants
- blue, grey, green, teal, purple, magenta, red, orange, yellow, inactive
- Sizes
- —
- States documented
- default
- Accessibility guidance
- no
Tag shows a status label as a strong element but is not attached to another element and does not carry counts. Included because the census lists status indicators here; no count badge exists.
1 corrected on re-read
- alias_kind: "contested" → "subset" Tag: status label ("show users the status of something"); no counts, not attached to host element
Material Web
Checked docs/components (22 files: button, checkbox, chip, dialog, divider, elevation, fab, focus-ring, icon-button, icon, list, menu, progress, radio, ripple, select, slider, switch, tabs, text-field), the repo top-level and labs directories, and docs/roadmap.md. Badge is listed under unbuilt components in the roadmap. Undocumented experimental source exists in labs/badge and labs/gb/components/badge, with no docs page, so it is not counted as shipped.
Primer
CounterLabel subset native: no @primer/react 38.40.1- Variants
- primary, secondary
- Sizes
- —
- States documented
- default
- Accessibility guidance
- yes
Count-only badge; rendered as span with aria-hidden and meant to sit beside text. Its Accessibility page is a single short paragraph. CircleBadge (logo container) is deprecated and has no Accessibility page. No status-dot badge found.
Spectrum
Badge native: no @spectrum-web-components/button 1.12.4- Variants
- accent, informative, neutral, positive, notice, negative, fuchsia, indigo, magenta, purple, seafoam, yellow, gray, red, orange, chartreuse, celery, green, cyan, blue, pink, turquoise, brown, cinnamon, silver
- Sizes
- s, m, l, xl
- States documented
- default
- Accessibility guidance
- yes
Variants and sizes from the SWC 2nd-gen page data; rsp Badge uses bold, subtle, outline fill styles and S2 also has a count-only NotificationBadge with no design-site page. Native check: SWC 2nd-gen renders divs and S2 Badge a span; the Accessibility section is cursor and WCAG guidance.
1 corrected on re-read
- variants: ["accent","informative","neutral","positive","notice","negative","fuchsia","indigo","magenta","purple","seafoam","yellow","gray","red","orange","chartreuse","celery","green","cyan","blue"] → ["accent","informative","neutral","positive","notice","negative","fuchsia","indigo","magenta","purple","seafoam","yellow","gray","red","orange","chartreuse","celery","green","cyan","blue","pink","turquoise","brown","cinnamon","silver"] swc-badge.json variant enum has 25 values; prior list omitted pink, turquoise, brown, cinnamon, silver
USWDS
Tag contested native: no- Variants
- .usa-tag--big
- Sizes
- .usa-tag--big
- States documented
- default
- Accessibility guidance
- yes
No badge or count indicator. Tag is a text label, not an attached count. Checked the docs components index (47 components, v3.14.0), a text search of the fetched component pages, and the 88 entries of packages/ on the develop branch.
9 corrected on re-read
- present: "absent" → "ships" Tag guidance lists use: 'indicate the number of new or unread items within a container'
- builds_on_native: null → "no" Twig renders span.usa-tag; not attached to a host by markup
- variants: null → [".usa-tag--big"] Docs variants table lists only .usa-tag--big
- sizes: null → [".usa-tag--big"] Same page: big is size
- states_documented: null → ["default"] Page demos default only; source has no hover/focus styles
- a11y_documented: null → "yes" Tag page has Accessibility guidance (ARIA live regions)
- urls: {"docs_url":null,"code_url":null} → {"docs_url":"https://designsystem.digital.gov/components/tag/","code_url":"https://github.com/uswds/uswds/tree/develop/packages/usa-tag"} Tag docs HTTP 200; tree/develop HTTP 200
- alias_kind: null → "contested" Documented job of tag includes counts, but no dedicated badge or attached-count pattern
- name_in_system: null → "Tag" Tag page title
Platform facts
Anatomy
The seven states
| default | Static label. |
|---|---|
| hover | n/a — Not interactive. |
| focus | n/a — Not focusable. |
| active | n/a — Not interactive. |
| disabled | n/a — Not defined. |
| error | n/a — Not defined. |
| loading | n/a — Not defined. |
Every cell was read twice, the second time from raw sources by a separate pass. 12 of 35 fields changed on the second read — open any “corrected” note to see what it said before.