Badge

A data display component that presents a compact label, count, or status indicator.

Usage

Badge

With Icon

Badge

Sizes

Use the badge-{size} class to control the component size.

Size values can include:smmdlg.

For more information on all available sizing utilities, visit Tailwind

Badge

Variants

Use the variant and palette classes to control the appereance of the component.

Variant values can include solidoutlinesurfacesubtleplain.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.

Badge

Customizing

globals.css


:root {
  --ex-badge-font-family: var(--font-sans);
  --ex-badge-font-weight: var(--font-weight-normal);
 
  --ex-badge-font-size-sm: var(--text-2xs);
  --ex-badge-font-size-md: var(--text-xs);
  --ex-badge-font-size-lg: var(--text-sm);
 
  --ex-badge-height-sm: calc(var(--spacing) * 4);
  --ex-badge-height-md: calc(var(--spacing) * 5);
  --ex-badge-height-lg: calc(var(--spacing) * 6);
 
  --ex-badge-gap-x-sm: calc(var(--spacing) * 0.75);
  --ex-badge-gap-x-md: calc(var(--spacing) * 1);
  --ex-badge-gap-x-lg: calc(var(--spacing) * 1.25);
 
  --ex-badge-px-sm: calc(var(--spacing) * 1);
  --ex-badge-px-md: calc(var(--spacing) * 1.5);
  --ex-badge-px-lg: calc(var(--spacing) * 2);
 
  --ex-badge-radius-sm: var(--radius-sm);
  --ex-badge-radius-md: var(--radius-sm);
  --ex-badge-radius-lg: var(--radius-sm);
}

API

Element	Selector
`Badge`	`.ex-badge`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`