Badge
A small label for status, category, or metadata.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- Short statuses next to titles or in table cells, such as Live, Draft, or Failed.
- Counts or states that change in place and should morph instead of jump.
- Tagging a row with one tone plus an optional icon.
- Use alert or toast when the message needs a full sentence.
- Use chip-group when people toggle the values.
- Use stat-card for a headline number with a trend.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { Badge } from 'animui/badge';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { Check } from "lucide-react";import { Badge } from "animui/badge"; export function DeployStatus({ live }: { live: boolean }) { return ( <Badge tone={live ? "success" : "neutral"} icon={live ? <Check size={12} /> : undefined}> {live ? "Live" : "Draft"} </Badge> );}Badge
A small status pill whose label and icon morph in place when they change.
PropTypeDefaultDescription
tone"neutral" | "success" | "info" | "warning" | "danger""neutral"Color of the pill.size"sm" | "md""md"Height and text size.iconReactNode–Leading icon. A different icon component crossfades in.childrenReactNode–Label. String or number children get the rolling text swap; other nodes render as is....propsHTMLAttributes<HTMLSpanElement>–Forwarded to the root span.- Renders a plain span, so it is read inline with surrounding text.
- The icon is aria-hidden; the label must state the status on its own, not rely on tone color.
- Outgoing labels are hidden from assistive tech while they fade, so only the current text is read.
- It does not announce changes. Put it inside a live region if a status update must be spoken.
- A new label rises in with a short blur while the old one lifts away, and the pill width springs to fit.
- Passive reflows such as font swaps resize instantly; only a content change springs.
- Reduced motion swaps the label with a quick fade and snaps the width.
- The pill sizes to its label and never wraps, so keep labels to a word or two in narrow cells.
- Hover styles apply only on hover-capable fine pointers.
- Each badge has a ResizeObserver for the width spring; fine per row, but avoid thousands in one table.
- Font swaps and passive reflows resize instantly; only content changes animate.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for short statuses and counts next to titles or in table cells. Use alert or toast for messages with sentences.
- Keep the badge mounted and change its children to get the morph; remounting with a new key loses it.
The full library index for assistants is at /llms.txt.