Badge

Labels an item with compact status or categorization information.

html

<noora-badge color="success">Available</noora-badge>

Attributes

Attribute	Type or allowed values	Default	Description
`aria-label`	`string`	None	Provides an accessible name when visible text is unavailable.
`appearance`	`fill`, `light-fill`	`"fill"`	Controls whether the badge uses a solid or light fill.
`color`	`neutral`, `destructive`, `warning`, `attention`, `success`, `information`, `focus`, `primary`, `secondary`	`"neutral"`	Controls the semantic color. Disabled badges ignore this value.
`size`	`small`, `large`	`"small"`	Controls the badge dimensions and text size.
`disabled`	`boolean`	`false`	Uses the disabled presentation regardless of color.
`dot`	`boolean`	`false`	Displays a dot before the label when the icon slot is empty.
`icon-only`	`boolean`	`false`	Hides the label and displays only the icon slot.
`label`	`string`	`""`	Provides fallback text when the default slot is empty.

Slots

Slot	Description
`default`	The visible label.
`icon`	An icon displayed before the label. It takes precedence over dot.

Styling parts

Part	Description
`badge`	The badge container.
`icon`	The icon or dot container.
`label`	The visible label.

Use the standard ::part() selector when an application needs a targeted override:

css

noora-badge::part(badge) {
  text-transform: uppercase;
}

The browser component uses appearance for the visual style because style is a native element property. The Phoenix component keeps its existing style attribute, and both map to the same contract value.

A slotted icon takes precedence over the generated dot.

Colors

Colors communicate semantic meaning while sharing the same compact shape.

html

<noora-badge color="neutral">Neutral</noora-badge>
<noora-badge color="destructive">Destructive</noora-badge>
<noora-badge color="warning">Warning</noora-badge>
<noora-badge color="attention">Attention</noora-badge>
<noora-badge color="success">Success</noora-badge>
<noora-badge color="information">Information</noora-badge>
<noora-badge color="focus">Focus</noora-badge>
<noora-badge color="primary">Primary</noora-badge>
<noora-badge color="secondary">Secondary</noora-badge>

Appearances and sizes

Use a light fill for lower emphasis and choose between small and large sizing.

html

<noora-badge appearance="fill" size="small" color="success">Small fill</noora-badge>
<noora-badge appearance="light-fill" size="small" color="success">Small light fill</noora-badge>
<noora-badge appearance="fill" size="large" color="information">Large fill</noora-badge>
<noora-badge appearance="light-fill" size="large" color="information">Large light fill</noora-badge>

Icons and states

Use a generated dot, provide an icon through its named slot, or apply the disabled presentation.

html

<noora-badge dot color="success">Online</noora-badge>

<noora-badge appearance="light-fill" color="warning">
  <svg slot="icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor">
    <circle cx="12" cy="12" r="9" stroke-width="2"></circle>
    <path d="M12 7v6" stroke-width="2"></path>
    <path d="M12 17h.01" stroke-width="2"></path>
  </svg>
  Needs attention
</noora-badge>

<noora-badge disabled>Disabled</noora-badge>