Status chip

A state of a status set (@krizaka/organize, krizaka-ts#89): its label in the person's language and its tone as a badge; read-only, or a menu of the moves the role may make — a second press to confirm, a reason picked from a list.

Web · ✓Mobile · ✓Desktop · ✓BetaData display

import { StatusChip } from "@krizaka/ui/status-chip";

To decidePaid

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. Used by Yomizaka, Akinaza.

When to use

The state of an entity whose kind has a status set the admin configures: an applicant file (« To decide → Selected | Declined »), a client, an invoice.
In a table column or a detail header: read-only for a derived set (an invoice's « Paid » comes from the ledger), editable where the role may move it.

When not to use

For a status that is not a set of the product (an upload, a build, a plan).Use instead: Badge
For a tag the person puts on a file (a category of their own).Use instead: Chip
To choose among views of a list.Use instead: Tabs

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { StatusChip } from "@krizaka/ui/status-chip";

Examples

Status of an applicant file

« To decide » with its moves for the owner (a second press for « Selected », a reason picked for « Declined »), the same state read-only for another role, and a derived status.

To decidePaid

Props

The state of a status set as a badge; a menu of the allowed moves when the set, the role and onMove allow it.

Prop	Type	Default	Description
`locale`required	`"fr" \| "en"`	—	The language the labels are read in.
`role`required	`string`	—	The role of the person: the moves are the ones this role may make.
`set`required	`StatusSet`	—	The kind's status set (`KindConfig.status`).
`state`required	`string`	—	The key of the entity's state.
`className`	`string`	—	Classes merged on the badge.
`labels`	`Partial<StatusChipLabels>`	—	The words of the menu, passed translated.
`onMove`	`((move: StatusMove) => void)`	—	Called when a move is chosen (confirmed, with its reason when it asks for one). Without it the chip is read-only.
`size`	`"sm" \| "md"`	`sm`	sm · md.

Accessibility

Read-only, it is plain text with a dot: the label says the state, the tone is never the only signal.
With moves it is a button named « Change the status, now … » that opens a Radix menu (arrows, typeahead, focus return).
The « Confirm: … » text is a polite live region.

Keyboard

Keys	Action
`Enter / Space / Arrow Down`	Opens the menu of moves.
`Arrow keys`	Move between the moves; Arrow Right opens the reasons of a move.
`Enter`	Makes the move, or on a move to confirm, asks « Confirm: … » first.
`Esc`	Closes the menu and returns to the chip.

Best practices

Pass the kind's StatusSet as it is (KindConfig.status), the entity's state key and the person's role: the menu is movesFrom(set, state, role), in the set's order — never your own list of moves.
A move that asks to be confirmed (transition.confirm) turns into « Confirm: … » on the first press. A move with reasons opens the list to pick from: there is never a free-text reason.
After a move that is not to a final state, offer an undo (a toast) with undoOf(set, move, role); after a final state there is none.
A status never takes a tag's colour: the tone (neutral · accent · success · warning · danger) is a tint and a dot, and the label always says the state.
A status column sorts by statusOrder(set), never alphabetically.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub