BundyUI

Elements

Popover

Status

A colored, iconed status dot with an optional label, opening a hover menu to switch to a different status.

html
<UiStatus />

Items

items are the statuses a viewer can pick between. Each carries its own color and optional icon — those, not the component, are what make a status legible at a glance.

Open
Waiting
In Progress
Blocked
Done
Stopped

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. Drop it and only the coloured dot or icon remains — the compact form for a table cell or a list row, where the column heading already says what the status is about.

Disabled

disabled renders the current status statically, with no hover menu to change it.

Done

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.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
items
StatusItem[]
The built-in Open / Waiting / In Progress / Blocked / Done / Stopped set.
The list of statuses selectable from the hover menu.
modelValue
string
—
The `value` of the currently selected status.
label
boolean
true
Show the status's text label next to its dot.
disabled
boolean
false
Renders a static dot (and label) with no hover menu to change it.
editable
boolean
false
Adds a divider and an "Edit statuses" row at the bottom of the menu, emitting `edit-states` instead of selecting a status when clicked.

Emits

Event
Payload
Description
update:modelValue
[value: string]
—
edit-states
[]
—

Types

ts
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.
     * @defaultValue 'neutral'
     */
    color?: "primary" | "secondary" | "success" | "warning" | "error" | "info" | "pending" | "neutral" | "background";

    /**
     * Icon shown inside the dot. Leave unset for a plain, empty dot.
     */
    icon?: string;
}