docs menuverified neutral danger
Badge
A small label for a state or a category: verified, neutral or danger.
import { Badge } from "@meowerse/ui"; · source packages/ui/src/components/Badge.tsx
variants and states
verified
draft
suspended
props
| prop | type | default | required |
|---|---|---|---|
variant | "verified" | "neutral" | "danger" the tone of the badge. | "neutral" | no |
icon | string a decorative icon name, shown before the label. | — | no |
children | ReactNode the label itself. | — | yes |
className | string extra class names to append. | — | no |
css custom properties
| variable | dark | light |
|---|---|---|
--c-accent | #00ff82 | #0a6e3c |
--c-danger | #ff6b63 | #b42318 |
--c-danger-tint | #2a1513 | #f6dcd8 |
--c-fg-muted | #b3b3af | #46464a |
--fs-1 | 0.75rem | same |
--leading-tight | 1.2 | same |
--r-s | 2px | same |
--sp-1 | 4px | same |
--sp-2 | 8px | same |
Classes: .mw-badge. Set any of these variables on an ancestor (or wrap a subtree in .mw-theme--dark / .mw-theme--light) to restyle just that part of a page.
usage
verified
import { Badge } from "@meowerse/ui";
<Badge variant="verified" icon="rosette-discount-check">verified</Badge><span class="mw-badge mw-badge--verified"><svg class="mw-icon" data-icon="rosette-discount-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 7.2a2.2 2.2 0 0 1 2.2 -2.2h1a2.2 2.2 0 0 0 1.55 -.64l.7 -.7a2.2 2.2 0 0 1 3.12 0l.7 .7c.412 .41 .97 .64 1.55 .64h1a2.2 2.2 0 0 1 2.2 2.2v1c0 .58 .23 1.138 .64 1.55l.7 .7a2.2 2.2 0 0 1 0 3.12l-.7 .7a2.2 2.2 0 0 0 -.64 1.55v1a2.2 2.2 0 0 1 -2.2 2.2h-1a2.2 2.2 0 0 0 -1.55 .64l-.7 .7a2.2 2.2 0 0 1 -3.12 0l-.7 -.7a2.2 2.2 0 0 0 -1.55 -.64h-1a2.2 2.2 0 0 1 -2.2 -2.2v-1a2.2 2.2 0 0 0 -.64 -1.55l-.7 -.7a2.2 2.2 0 0 1 0 -3.12l.7 -.7a2.2 2.2 0 0 0 .64 -1.55v-1"></path><path d="M9 12l2 2l4 -4"></path></svg>verified</span>neutral
import { Badge } from "@meowerse/ui";
<Badge>draft</Badge><span class="mw-badge mw-badge--neutral">draft</span>danger
import { Badge } from "@meowerse/ui";
<Badge variant="danger">suspended</Badge><span class="mw-badge mw-badge--danger">suspended</span>accessibility
- The text carries the meaning; the icon is hidden from assistive tech.
- A badge is not interactive.
do and don't
do
- Keep it to one or two words.
don't
- Don't use a badge as a button.
- Don't make a badge green unless it means verified or ok.