Components
Loading preview...
A label that emphasizes an element that requires attention, or helps categorize with other similar elements.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/badge-1import { Badge } from "@/components/ui/badge-1";
import Link from "next/link";
const LogoSlackColor = () => (
<svg
height="16"
strokeLinejoin="round"
viewBox="0 0 16 16"
width="16"
>
<g clipPath="url(#clip0_872_3152)">
<path
d="M3.42681 10.0787C3.42681 10.9984 2.68351 11.7417 1.76382 11.7417C0.844137 11.7417 0.10083 10.9984 0.10083 10.0787C0.10083 9.15906 0.844137 8.41575 1.76382 8.41575H3.42681V10.0787ZM4.25831 10.0787C4.25831 9.15906 5.00162 8.41575 5.9213 8.41575C6.84099 8.41575 7.58429 9.15906 7.58429 10.0787V14.2362C7.58429 15.1559 6.84099 15.8992 5.9213 15.8992C5.00162 15.8992 4.25831 15.1559 4.25831 14.2362V10.0787Z"
fill="#E01E5A"></path>
<path
d="M5.92121 3.40158C5.00152 3.40158 4.25821 2.65827 4.25821 1.73858C4.25821 0.818899 5.00152 0.075592 5.92121 0.075592C6.84089 0.075592 7.5842 0.818899 7.5842 1.73858V3.40158H5.92121ZM5.92121 4.24567C6.84089 4.24567 7.5842 4.98898 7.5842 5.90866C7.5842 6.82835 6.84089 7.57165 5.92121 7.57165H1.75113C0.831442 7.57165 0.0881348 6.82835 0.0881348 5.90866C0.0881348 4.98898 0.831442 4.24567 1.75113 4.24567H5.92121Z"
fill="#36C5F0"></path>
<path
d="M12.5858 5.90866C12.5858 4.98898 13.3291 4.24567 14.2488 4.24567C15.1685 4.24567 15.9118 4.98898 15.9118 5.90866C15.9118 6.82835 15.1685 7.57165 14.2488 7.57165H12.5858V5.90866ZM11.7543 5.90866C11.7543 6.82835 11.011 7.57165 10.0913 7.57165C9.17165 7.57165 8.42834 6.82835 8.42834 5.90866V1.73858C8.42834 0.818899 9.17165 0.075592 10.0913 0.075592C11.011 0.075592 11.7543 0.818899 11.7543 1.73858V5.90866Z"
fill="#2EB67D"></path>
<path
d="M10.0913 12.5732C11.011 12.5732 11.7543 13.3165 11.7543 14.2362C11.7543 15.1559 11.011 15.8992 10.0913 15.8992C9.17165 15.8992 8.42834 15.1559 8.42834 14.2362V12.5732H10.0913ZM10.0913 11.7417C9.17165 11.7417 8.42834 10.9984 8.42834 10.0787C8.42834 9.15906 9.17165 8.41575 10.0913 8.41575H14.2614C15.1811 8.41575 15.9244 9.15906 15.9244 10.0787C15.9244 10.9984 15.1811 11.7417 14.2614 11.7417H10.0913Z"
fill="#ECB22E"></path>
</g>
<defs>
<clipPath id="clip0_872_3152">
<rect width="16" height="16" fill="white"></rect>
</clipPath>
</defs>
</svg>
);
export default function SizesDemo() {
return (
<div className="flex flex-col gap-2">
<div className="flex gap-1">
<Badge as={Link} href="#badge#pill" size="sm" variant="pill">
Label
</Badge>
<Badge as={Link} href="#badge#pill" size="md" variant="pill">
Label
</Badge>
<Badge as={Link} href="#badge#pill" size="lg" variant="pill">
Label
</Badge>
</div>
<div className="flex gap-1">
<Badge
as={Link}
href="#badge#pill"
icon={<LogoSlackColor />}
size="sm"
variant="pill"
>
Label
</Badge>
<Badge
as={Link}
href="#badge#pill"
icon={<LogoSlackColor />}
size="md"
variant="pill"
>
Label
</Badge>
<Badge
as={Link}
href="#badge#pill"
icon={<LogoSlackColor />}
size="lg"
variant="pill"
>
Label
</Badge>
</div>
</div>
);
}