Badge

A small label for statuses, counts and categories.

$ pnpm dlx shadcn@latest add https://dashral.com/r/badge.json

solidprimaryneutralinfosuccesswarningdestructivehighlight

softprimaryneutralinfosuccesswarningdestructivehighlight

outlineprimaryneutralinfosuccesswarningdestructivehighlight

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/badge.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/badge

Usage

example.tsx

1import { Badge } from "@/components/dashral/badge"
2
3<Badge variant="soft" color="success" dot>
4  Paid
5</Badge>

Examples

Icons and dots

Pair a color with an icon or a word so meaning never relies on color alone; dot adds a status dot.

Paid Pending Failed

OnlineAwayOfflineLive

In an app

A count on the bell that pops when it changes (99+ past 99), and counts and New/Beta tags in a menu.

API reference

Badge

Also takes every prop of <span>(opens in a new tab).

Prop	Type	Default
`variant`	`"solid" \| "soft" \| "outline"` How much it stands out.	`"solid"`
`color`	`"primary" \| "neutral" \| "info" \| "success" \| "warning" \| "destructive" \| "highlight"` What it means.	`"primary" (outline: "neutral")`
`dot`	`boolean` A status dot before the label.	`false`
`asChild`	`boolean` Render the child element instead (e.g. a Next.js Link), passing these styles and props to it.	`false`
`className`	`string` Extra classes, merged with cn() so yours win.	—

Accessibility

Every variant and color meets WCAG AA contrast in both themes. Add an icon or word so meaning doesn't depend on color.