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="outline"> Primary </Badge> <Badge variant="success" appearance="outline"> Success </Badge> <Badge variant="warning" appearance="outline"> Warning </Badge> <Badge variant="info" appearance="outline"> Info </Badge> <Badge variant="destructive" appearance="outline"> Destructive </Badge> </div> ); }
Part of ReUI — browse the full library on 21st.dev.