Status Badge

Displays a compact workflow status with a semantic icon or dot.

StatusBadge web component

Displays a compact workflow status with a semantic icon or dot.

Setup

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

Statuses

Communicate workflow state with a semantic icon.

<noora-status-badge status="success" label="Complete"></noora-status-badge>
<noora-status-badge status="error" label="Failed"></noora-status-badge>
<noora-status-badge status="warning" label="Warning"></noora-status-badge>
<noora-status-badge status="attention" label="Needs attention"></noora-status-badge>
<noora-status-badge status="in_progress" label="Running"></noora-status-badge>

Dot indicators

Use dots when the icon shape is unnecessary.

<noora-status-badge type="dot" status="success" label="Complete"></noora-status-badge>
<noora-status-badge type="dot" status="error" label="Failed"></noora-status-badge>
<noora-status-badge type="dot" status="warning" label="Pending"></noora-status-badge>
<noora-status-badge type="dot" status="attention" label="Needs attention"></noora-status-badge>
<noora-status-badge type="dot" status="in_progress" label="Running"></noora-status-badge>

Attributes

Attribute	Type or allowed values	Default	Description
`type`	icon, dot	`"icon"`	Chooses a semantic icon or a dot indicator.
`status`	success, error, warning, attention, disabled, in_progress	`"success"`	Sets the semantic status.
`label`	string	`""`	Sets the visible label.

Slots

Name	Description
`default`	Custom label content that takes precedence over the label attribute.

Styling parts

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