A customizable badge component built with Base UI and useRender hook for composition.
import { Badge } from '@/components/ui/base-badge'; export default function BadgeDemo() { return ( <div className="flex items-center gap-4"> <Badge variant="primary" appearance="light"> Primary </Badge> <Badge variant="success" appearance="light"> Success </Badge> <Badge variant="warning" appearance="light"> Warning </Badge> <Badge variant="info" appearance="light"> Info </Badge> <Badge variant="destructive" appearance="light"> Destructive </Badge> </div> ); }
Part of ReUI — browse the full library on 21st.dev.