Display

Badge

Server Component

Small status / category label.

Import

tsx

import { Badge } from "@cronus-ui/ui";

bash

npx cronus-ui add badge

Examples

Variants

Compact status and category labels across the semantic palette.

DefaultPrimarySecondaryOutlineSuccessWarningErrorInfo

tsx

<div className="flex flex-wrap gap-2">
  <Badge variant="default">Default</Badge>
  <Badge variant="primary">Primary</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="outline">Outline</Badge>
  <Badge variant="success">Success</Badge>
  <Badge variant="warning">Warning</Badge>
  <Badge variant="error">Error</Badge>
  <Badge variant="info">Info</Badge>
</div>

With icon

Pair a leading icon with the label to reinforce meaning.

Verified

tsx

<Badge variant="success">
  <Check aria-hidden="true" />
  Verified
</Badge>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component BadgeDefault layout:inline style:badge {
  label "New"
}

page "/audit/badge/default" type:custom {
  use BadgeDefault
}

API Reference

Generated from the component's exported types.

BadgeProps

Extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants>

Prop	Type	Default	Description
`variant`	`"default" \| "primary" \| "secondary" \| "outline" \| "success" \| "warning" \| "destructive" \| "error" \| "info"`	`"default"`	One of "default" \| "primary" \| "secondary" \| "outline" \| "success" \| "warning" \| "destructive" \| "error" \| "info".
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.