Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

primitive · badge

Badge

A compact badge for semantic status and metadata.

Install with npx @madojs/ui@latest add badge.

Primitive

Badge

Neutral Information Ready Review Failed

Composition

  • Wrap short semantic status text in mado-ui-badge. Choose only the shared neutral, info, success, warning or danger tone vocabulary.

Public API

element mado-ui-badge
Inline Shadow-DOM badge whose text remains authored light-DOM content.
attribute tone
Presentation tone: neutral, info, success, warning or danger.
slot default
Short visible label; domain states remain application vocabulary.
part badge
Styling hook for the internal badge surface.
css-property --mado-ui-badge-background
Overrides the resolved tone background.

Detected public CSS properties

  • --mado-ui-badge-background
  • --mado-ui-badge-border
  • --mado-ui-badge-color
  • --mado-ui-badge-font-size
  • --mado-ui-badge-font-weight
  • --mado-ui-color-danger-soft
  • --mado-ui-color-danger-text
  • --mado-ui-color-info-soft
  • --mado-ui-color-info-text
  • --mado-ui-color-neutral-soft
  • --mado-ui-color-neutral-text
  • --mado-ui-color-success-soft
  • --mado-ui-color-success-text
  • --mado-ui-color-warning-soft
  • --mado-ui-color-warning-text
  • --mado-ui-radius-sm

Accessibility contract

  • Tone is never the sole carrier of meaning; the slotted text must state the status.

Keyboard

  • The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

  • The badge is not interactive and never enters the Tab sequence.

Fallback

  • Unknown tone values resolve to the neutral visual treatment while preserving text.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.