StatusBadge

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

html

<noora-status-badge status="success" label="Complete"></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

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

Styling parts

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

Statuses

Communicate workflow state with a semantic icon.

html

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

html

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