Badge
A short status or category.
The frame above shows the real web components, in the mode this site is in.
The design preview shows it next to every other web component.
When to use it
Section titled “When to use it”- The words carry the meaning and the color only reinforces it, so a badge still reads for someone who cannot tell the tones apart.
dotadds a small mark for live states such as “connected”.
Example
Section titled “Example”import { Badge } from "@acme/ui";
<Badge tone="success" dot>Connected</Badge>Options
Section titled “Options”The web component’s props. The other platforms take the same options under their own naming conventions.
| Prop | Type | Notes |
|---|---|---|
tone |
"neutral" | "accent" | "success" | "warning" | "danger" |
Defaults to neutral. |
dot |
boolean |
Source
Section titled “Source”| Platform | File |
|---|---|
| Web (React) | packages/ui/src/Badge.tsx |
| Desktop (GPUI) | crates/acme-ui/src/components.rs |
| React Native | packages/ui-native/src/Badge.tsx |
| Compose Multiplatform | kotlin/ui/src/commonMain/kotlin/acme/ui/Badge.kt |