Status

What state something is in: a ticket, chat, campaign run, or account. For what something is, use Tag.

Installation

bun add @harmo-ui/css @harmo-ui/react

npm install @harmo-ui/css @harmo-ui/react

pnpm add @harmo-ui/css @harmo-ui/react

yarn add @harmo-ui/css @harmo-ui/react

bunx harmo-ui add status

npx harmo-ui add status

pnpm dlx harmo-ui add status

yarn dlx harmo-ui add status

Usage

import { Status } from "@harmo-ui/react";

<Status status="success">Active</Status>
<Status status="warning" variant="bordered">
  Pending review
</Status>

Examples

This site is using your theme

Statuses

data-status picks one of four meanings; without it the dot is gray. The text carries the meaning and the dot supports it. A plain status takes the font size and line height of the text around it.

ActivePending reviewScheduledFailedDraft

<>
  <Status status="success">Active</Status>
  <Status status="warning">Pending review</Status>
  <Status status="info">Scheduled</Status>
  <Status status="error">Failed</Status>
  <Status>Draft</Status>
</>

<span class="hstatus" data-status="success">Active</span>
<span class="hstatus" data-status="warning">Pending review</span>
<span class="hstatus" data-status="info">Scheduled</span>
<span class="hstatus" data-status="error">Failed</span>
<span class="hstatus">Draft</span>

Bordered

data-variant="bordered" makes a pill with 13px text, for headers and summaries.

ActivePending reviewScheduledFailedDraft

<>
  <Status status="success" variant="bordered">
    Active
  </Status>
  <Status status="warning" variant="bordered">
    Pending review
  </Status>
  <Status status="info" variant="bordered">
    Scheduled
  </Status>
  <Status status="error" variant="bordered">
    Failed
  </Status>
  <Status variant="bordered">Draft</Status>
</>

<span class="hstatus" data-status="success" data-variant="bordered">Active</span>
<span class="hstatus" data-status="warning" data-variant="bordered">Pending review</span>
<span class="hstatus" data-status="info" data-variant="bordered">Scheduled</span>
<span class="hstatus" data-status="error" data-variant="bordered">Failed</span>
<span class="hstatus" data-variant="bordered">Draft</span>

Next to a tag

A tag says what something is, and a status what state it's in. A tag is a rectangle with a dot only when it has a color; a status always has a dot, and is a pill when bordered.

BillingActiveDefaultActive

<>
  <Tag color="var(--harmo-green)">Billing</Tag>
  <Status status="success" variant="bordered">
    Active
  </Status>
  <Tag>Default</Tag>
  <Status status="success">Active</Status>
</>

<span class="htag" style="--htag-color: var(--harmo-green)">
  <span class="htag-dot" aria-hidden="true"></span>Billing
</span>
<span class="hstatus" data-status="success" data-variant="bordered">Active</span>
<span class="htag">Default</span>
<span class="hstatus" data-status="success">Active</span>

API reference

React

<Status> renders the status, with its children as the text. Other props are the <span>'s attributes.

Prop	Effect
`status`	`success`, `warning`, `info`, or `error`; gray when left out
`variant`	`bordered`

HTML

A <span class="hstatus"> with the state as its text. The element draws the dot itself. Load status.css. It needs no script.

Hook	Effect
`data-status="success"`	Green dot (`--harmo-status-color-success`)
`data-status="warning"`	Amber dot (`--harmo-status-color-warning`)
`data-status="info"`	Cyan dot (`--harmo-status-color-info`)
`data-status="error"`	Red dot (`--harmo-status-color-error`)
No `data-status`	Gray dot (`--harmo-color-border-control`)
`data-variant="bordered"`	A pill, for headers and summaries

There is no custom color: the app maps its own states, such as a campaign run's "sending", to these four. See Status's full contract.

Accessibility

The text carries the meaning; the dot's color only supports it, so a status never relies on color alone.