Badge
A small label for status and counts: neutral, accent, success, warning, danger.
DraftNewAcceptedUnder reviewFailed
Features
- Neutral, accent, success, warning and danger; an optional dot.
Use it for
- Status, counts, tags.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
Usage
import { Badge } from 'runets'
<Badge tone="success" dot>Accepted</Badge>API
| Prop | Type | What it does |
|---|---|---|
tone | string | Colour. |
dot | boolean | Leading dot. |
Accessibility
- Plain text; the dot is hidden from assistive tech.
Source
The code is in src/kit/controls.tsx in runets, MIT licensed.