Elements
Status
A colored, iconed status dot with an optional label, opening a hover menu to switch to a different status. The interactive one of the three: Tag labels, Badge counts, Status changes.
<UiStatus />Options
One block per prop — what it does, and what it looks like set.
Items
items are the statuses a viewer can pick between, each with its own color and optional icon — that's what makes a status legible at a glance.
Model value
modelValue is the selected status's value. Bind it with v-model and the hover menu writes the new choice straight back.
Label
label is the text beside the indicator. Set it to false for the compact form — just the coloured dot or icon — for a table cell or list row where the column heading already says what the status is about.
Disabled
disabled renders the current status as a static, read-only dot.
Editable
editable adds an "Edit statuses" action at the foot of the menu, which emits edit-states — hand that to whatever screen owns the status list.
Size
size sets the dot's pixel size, md or lg — use it to match the dot to a fixed-size layout, like sitting it beside an Avatar marker.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
StatusItem[]The built-in Open / Waiting / In Progress / Blocked / Done / Stopped set.booleanfalseEmits
update:modelValue[value: string]edit-states[]Types
interface StatusItem {
/**
* Unique value identifying this status, matched against `modelValue`.
*/
value: string;
/**
* Text label shown next to the dot (when `label` is enabled) and in the menu.
*/
label: string;
/**
* The dot's color. Leave unset (or `neutral`) for a plain, uncolored dot. `background` renders a
* dot that matches the page background, with a separation ring so it stays visible against it —
* the same empty-circle mark CheckList uses for an unchecked item.
* @defaultValue 'neutral'
*/
color?: "primary" | "secondary" | "success" | "warning" | "error" | "info" | "pending" | "neutral" | "background";
/**
* Icon shown inside the dot, rendered filled where the icon ships a filled variant. Leave
* unset for a plain, empty dot.
*/
icon?: string;
}