Block · C-059 · erp

StatusBadge

Maps an order status to a Badge tone with a decorative dot. The caller supplies the text: colour is never the only signal.

Install

Blocks compose Koten primitives; install koten-theme first.

npx shadcn@latest add https://koten.codehive.com.co/r/status-badge.json

Anatomy

This block composes Koten primitives. Read the source files before changing it.

@/components/patterns/status-badge.tsx
@/lib/koten/cn.ts
@/lib/koten/format.ts
@/lib/koten/intl.ts
@/lib/koten/labels.ts
@/lib/koten/provider.tsx

Accessibility

The dot is decorative (aria-hidden) and the text is required: colour never communicates alone.
The tone comes from status; do not pass an arbitrary tone for a new state without extending the map.
Inside a row the badge is not interactive: do not use it as a filter button.

Read the whole page