Components

Badge

Status chip: a quiet pill whose optional dot can breathe a slow expanding ring to mark live state.

DraftBetaLiveDegradedv2.4.0

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add badge

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Badge } from "@lumora/ui/components/badge";
// or from the barrel:
import { Badge } from "@lumora/ui";

Props worth knowing

variant: neutral | accent | positive | negative | outline; size: sm | md. dot leads with a status dot in the variant's tone, and pulse loops a soft expanding ring around it (implying dot). The ring holds still under reduced motion. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.