Badge

Status labels. Supports render like Button.

DefaultSecondaryOutlineGhostDestructiveLink

Installation

npx @noarka/cli add badge

tsx

import { Badge } from "@noarka/ui";

tsx

<Badge variant="secondary">Beta</Badge>

Status dot

Prefix the label with a dot span for live status indicators.

Live

As a link

Use render to turn the badge into an anchor. Styles merge onto it.

Custom colors

Override with utilities for one-off status colors.

Active

Badge

Prop	Type	Default
`variant` Visual style.	`"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"`	`"default"`
`children` Label content. Prefix with an icon or dot span for status badges.	`ReactNode`	`-`
`render` Replace the rendered span with a custom element, e.g. render={<a href="#">Changelog</a>}. Badge styling and data attributes are merged onto it. Replaces the old Radix asChild prop.	`ReactElement`	`-`
`className` Additional classes merged with the variant styles.	`string`	`-`