Badge
A small inline label for status or metadata, optionally led by an icon.
import { Badge } from "@sanity/sanity-id/components/badge"Props
| Prop | Type | Description |
|---|---|---|
children | ReactNode | Content of the badge |
className | string | Additional CSS classes |
icon | IconSymbol | Icon displayed before the text |
size | "sm" | "md" | Size of the badge default value: "md" |
Usage
Badge with icon (medium)Badge (medium)Badge with icon (small)Badge (small)
1import { Badge } from "@sanity/sanity-id/components/badge"
2
3export default () => {
4 return (
5 <div className="grid grid-cols-[repeat(2,max-content)] gap-x-32 gap-y-16">
6 <Badge icon="component" size="md">Badge with icon (medium)</Badge>
7 <Badge size="md">Badge (medium)</Badge>
8 <Badge icon="component" size="sm">Badge with icon (small)</Badge>
9 <Badge size="sm">Badge (small)</Badge>
10 </div>
11 )
12 }