Badge

Small informational badges for displaying labels, statuses, and categories.

Source

View source code

Issues

Report an issue

Package

@rootui/badge

Preview

Status

color

variant

size

isDisabled

1<e>
2  Status
3</e>

1<Badge></Badge>

Package

Shadcn CLI

Manual

Note

Please ensure your local environment is fully configured as instructed in the getting started guide.

npm

yarn

pnpm

bun

npm install @rootui/badge

1import { Badge } from "@rootui/badge";
2
3export default function Page() {
4  return (
5    <Badge>status</Badge>
6  )
7}

Prop	Type	Default
`color`	`'neutral' \| 'primary' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'magic'`	`'neutral'`
The color of the badge.
`variant`	`'filled' \| 'outlined' \| 'subtle' \| 'transparent'`	`'filled'`
The visual style of the badge.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
The size of the badge.
`isDisabled`	`boolean`	`false`
Whether the badge is disabled.