A Badge is a small, visually distinct element used to display contextual metadata, such as status, category, or notifications, enhancing the clarity and organization of your design.
import Link from 'next/link'; import { Badge, BadgeDot } from '@/components/ui/badge-2'; export default function BadgeDemo() { return ( <Badge asChild appearance="light" shape="circle"> <Link href="#"> <BadgeDot className="bg-primary" /> Badge </Link> </Badge> ); }
Part of ReUI — browse the full library on 21st.dev.