Status Pill
StatusPill
A compact, rounded label with a leading dot, for states such as "Open", "Recurring", or "Live on mainnet". The tone picks the color from the semantic tokens; the text is whatever you pass in, already translated. Used by the program cards and dialog on the grants and funding page.
Basic Usage
import StatusPill from '@site/src/components/Layout/StatusPill';
<StatusPill tone="success" label="Live on mainnet" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Visible text. Pass a translated string. |
tone | 'info' | 'success' | 'warning' | 'neutral' | 'neutral' | Color of the pill. Unknown values fall back to neutral. |
className | string | - | Extra class for layout tweaks, for example margins. |
Tones
| Tone | Token | Typical use |
|---|---|---|
info | --ifm-color-primary on --site-tint-strong | Work in progress, informational states. |
success | --site-success | Live, open, enacted. |
warning | --site-warning | Upcoming deadlines, pending decisions. |
neutral | Infima emphasis scale | Planned, closed, or unknown. |
The tints are mixed from the tokens with color-mix(), so the pill follows the theme in light and dark mode without extra colors.
Live Preview
In developmentLive on mainnetOpen until Sep 30Planned