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="ghost" disabled> Ghost </Badge> <Badge variant="primary" disabled> Solid </Badge> <Badge variant="primary" appearance="light" disabled> Light </Badge> <Badge variant="primary" appearance="outline" disabled> Outline </Badge> </div> ); }
Part of ReUI — browse the full library on 21st.dev.