Feedback

Badge

A compact high-contrast label for statuses, tags and small interface signals.

Component

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

3 controls

New drop

Controls

children

tone

size

<Badge
  tone="yellow"
  size="md"
>
  New drop
</Badge>

6 generated

Prop	Type	Default	Notes
`asChild`	`boolean`	`false`	Generated from BadgeProps.
`children`	`ReactNode`	`-`	Badge text or inline content.
`size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Controls the compact badge padding and text size.
`tone`	`'blue' \| 'yellow' \| 'red' \| 'white' \| 'black'`	`"yellow"`	Applies one of the Swirski status color treatments.
`variant`	`'solid' \| 'outline' \| 'soft'`	`"solid"`	Generated from BadgeProps.
`withShadow`	`boolean`	`true`	Generated from BadgeProps.
`className`	`string`	`-`	Adds classes to the root span.
`...spanProps`	`HTMLAttributes<HTMLSpanElement>`	`-`	Forwarded to the root span.