Badge
Displays a badge or a component that looks like a badge.
'use client'; import { Badge } from 'sdaia-ui'; const NOTIFICATIONS = [Installation
npx sdaia-ui@latest add badge
Usage
import { Badge } from "@/components/ui/badge"<Badge>Label</Badge>Examples
Size
Use the `size` prop to change the size of the badge.
'use client'; import { Badge } from 'sdaia-ui';import AlertCircleSVG from '@/public/react-svgs/AlertCircleSVG'; Default
The default Soft badge with Neutral colour.
'use client'; import { Badge } from 'sdaia-ui';import AlertCircleSVG from '@/public/react-svgs/AlertCircleSVG'; Solid
Use `style="Solid"` for a high-contrast filled badge.
'use client'; import { Badge } from 'sdaia-ui';import AlertCircleSVG from '@/public/react-svgs/AlertCircleSVG'; Primary
Use `color="Primary"` to apply the brand primary colour.
'use client'; import { Badge } from 'sdaia-ui';import AlertCircleSVG from '@/public/react-svgs/AlertCircleSVG'; Destructive
Use `color="Error"` to signal a critical or error condition.
'use client'; import { Badge } from 'sdaia-ui';import AlertCircleSVG from '@/public/react-svgs/AlertCircleSVG'; Pill
Use `pill={true}` for a fully rounded pill-shaped badge.
'use client'; import { Badge } from 'sdaia-ui';import AlertCircleSVG from '@/public/react-svgs/AlertCircleSVG'; Icon
Use `iconOnly={true}` to render the badge with an icon and no label.
'use client'; import { Badge } from 'sdaia-ui';import AlertCircleSVG from '@/public/react-svgs/AlertCircleSVG'; API Reference
BadgeProps
Props for the Badge component.
Prop | Type | Default | Required |
|---|---|---|---|
children | ReactNode | - | optional |
size | 'sm' | 'md' | 'lg' | 'md' | optional |
variant | 'soft' | 'solid' | 'soft' | optional |
color | 'neutral' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'warning' | 'error' | 'neutral' | optional |
pill | boolean | false | optional |
iconOnly | boolean | false | optional |
leadingIcon | ReactNode | - | optional |
trailingIcon | ReactNode | - | optional |