Badges
Color tags in flat/outline variants, rounded or pill shape, with optional dot.
Preview
Gray
Red
Yellow
Green
Blue
Indigo
Purple
Pink
Gray
Red
Yellow
Green
Blue
Indigo
Purple
Pink
Gray
Red
Yellow
Green
Blue
Indigo
Purple
Pink
React preview
LiveView (HEEx)
alias DesignSystem.UI.Badges
<Badges.badge color="green">Active</Badges.badge>
<Badges.badge color="red" variant="outline" shape="pill">Failed</Badges.badge>
<Badges.badge color="blue" dot>In review</Badges.badge>React (JSX)
import { Badge } from "../ui/index.mjs"
<Badge color="green">Active</Badge>
<Badge color="red" variant="outline" shape="pill">Failed</Badge>
<Badge color="blue" dot>In review</Badge>