Status · Orbex Sonar-DB Design System

Examples

Dots, for rows and lists

DeliveredDue todayDelayedScheduled

Code

tsx

import { Status } from '@orbex/sonar-components/status'

export default function Dots() {
  return (
    <>
      <Status tone="positive">Delivered</Status>
      <Status tone="warning">Due today</Status>
      <Status tone="danger">Delayed</Status>
      <Status>Scheduled</Status>
    </>
  )
}

Chips, for headers and containers

PaidOn holdOverdueDraft

Code

tsx

import { Status } from '@orbex/sonar-components/status'

export default function Chips() {
  return (
    <>
      <Status appearance="chip" tone="positive">Paid</Status>
      <Status appearance="chip" tone="warning">On hold</Status>
      <Status appearance="chip" tone="danger">Overdue</Status>
      <Status appearance="chip">Draft</Status>
    </>
  )
}

Sizes, variants and states

Tones and appearances

Usage

Positive: done, paid, delivered. Warning: pending, on hold, due today. Danger: delayed, overdue, canceled. Neutral: scheduled, draft.
Use the chip where status text would sit on a container: colored text does not reach 4.5:1 there.
One word or two. The detail goes in the panel the row opens.

Do and don’t

DoA dot and a word. The word carries the state; the color helps scanning.

Don’tColor alone. Without the word, the state is lost to anyone who cannot tell the hues apart.

DoOne or two words. The detail goes in the panel the row opens.

Don’tA sentence in a status: it wraps, and the list stops scanning.

Accessibility

Keyboard

Key	What it does
None	Status is text, not a control.

Roles and attributes

Element or attribute	What it gives
Text	The state is always written, so it never depends on color.
Dot	aria-hidden.

Notes

Color never carries the state alone: the word always names it.
The mark is hidden from assistive technology.

Use it

Each component is its own entry point with its own stylesheet, so an app loads only what it uses. The tokens and the cascade layers are set once for the app: see Installation.

tsx

import { Status } from '@orbex/sonar-components/status'
import '@orbex/sonar-components/status.css'

API

Props of Status
Prop	Type	Default
`tone` What the state means. Color never carries it alone: the text always names it.	`'neutral' \| 'positive' \| 'warning' \| 'danger'`	`'neutral'`
`appearance` A dot beside the text, for rows and lists; or a chip, for headers and for containers, where colored text would not reach 4.5:1.	`'dot' \| 'chip'`	`'dot'`
`hideLabel` Only the dot shows; the state stays in the text for assistive technology. For dense rows where a tooltip or the row’s details name the state, as in the overview’s calendars.	`boolean`	`false`
`children` Required The state in words: Delivered, Delayed, Due today.	`ReactNode`	—

Also takes every attribute of the native <span> , and a ref to it.