Badge

Labels an item with compact status or categorization information.

Badge web component

Labels an item with compact status or categorization information.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Colors

Colors communicate semantic meaning while sharing the same compact shape.

Neutral

Destructive

Warning

Attention

Success

Information

Focus

Primary

Secondary

<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.

Small fill

Small light fill

Large fill

Large light fill

<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.

Online

Needs attention

Disabled

<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>

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

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

Styling parts

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

Behavior

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.