Badge

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @shark-ui/badge

Usage

import { Badge } from "@/components/ui/badge";

<Badge>New</Badge>

Variants

You can change the variant of the badge using the variant prop.

Solid

Secondary

Outline

Success

Info

Warning

Destructive

Sizes

You can change the size of the badge using the size prop.

Small

Large

Pill

You can use the pill prop to create fully rounded badges.

Examples

With link

You can use asChild prop on <Badge /> to make another element styled as a badge.

Custom color

You can use the className prop to add custom colors to the badge.

With icon

You can add icons to badges to provide visual context.

With spinner

You can add a <Spinner /> to badges to indicate loading states.

With count

Badges can display counts or numbers for notifications and indicators.

API Reference

Badge

Root element of the badge. Renders a span