Badge
ReadyShort status or metadata label.
DefaultSecondaryOutlineLiveFailed
Installation
$ npx @oratiq-js/ui add badgeCopies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.
Usage
import
import { Badge, badgeVariants } from "@/components/ui/badge";Variants
Default
default
Secondary
secondary
Outline
outline
Muted
muted
Active
success
Pending
warning
Failed
destructive
Beta
info
Sizes and dots
SmallDefaultLargeLiveDraft
Guidance
Do
Failed
Use colour and text together. Colour alone fails for colourblind users and in monochrome print.
Don't
Don't rely on a bare colour swatch to carry the status meaning.
View source on GitHub → components/ui/badge.tsx