Badge

Status Readout in Bracket Notation

01 Preview

02 Usage

Status readout in spec-sheet bracket notation.

<Badge status="ok">Deployed</Badge>
<Badge status="warn" bracket="[WIP]">Draft</Badge>

Statuses: ok | warn | err | info. Use sparingly - one per row of metadata.

03 Props

Prop	Type	Default	Notes
status	`'ok' \| 'warn' \| 'err' \| 'info'`	`ok`	—
bracket	`string`	—	Override the bracket text, e.g. "[WIP]"
children	`React.ReactNode`	—	—

Also accepts every attribute of React.HTMLAttributes<HTMLSpanElement> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.

04 Import

import { Badge } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';