v0.8.1

Badge

A compact label component for categorization, status, and metadata display.

This component's API and documentation are under review and may change. Use with caution in production.

Badge is a small, inline element used to display labels, statuses, counts, or categories. It supports multiple variants, colors, and can include tooltips for additional context.

This is an enhanced version of the Badge from Radix Themes.

Playground

Badge

Installation

npm install @kushagradhawan/kookie-ui

Usage

import { Badge, Flex } from '@kushagradhawan/kookie-ui';
 
export function MyBadges() {
  return (
    <Flex gap="2">
      <Badge>Default</Badge>
      <Badge color="green">Published</Badge>
      <Badge color="amber">Pending</Badge>
      <Badge color="red">Failed</Badge>
    </Flex>
  );
}

Props

PropTypeDefaultDescription
size'1' | '2' | '3' | '4''1'Controls the size of the badge. Supports responsive values.
variant'solid' | 'soft' | 'surface' | 'outline' | 'ghost' | 'classic''soft'The visual style of the badge.
colorAccentColor-The accent color. Uses theme accent if not specified.
radius'none' | 'small' | 'medium' | 'large' | 'full'-Override the default border radius.
material'solid' | 'translucent'-Controls material appearance with translucent adding blur.
tooltipReact.ReactNode-Content to display in a tooltip on hover.
tooltipSide'top' | 'right' | 'bottom' | 'left''top'Position of the tooltip.
tooltipAlign'start' | 'center' | 'end''center'Alignment of the tooltip.
asChildbooleanfalseMerge props onto the child element.

Variants

Solid

Bold, filled background for high emphasis.

<Badge variant="solid" color="blue">Solid</Badge>

Soft

The default variant with a subtle tinted background.

<Badge variant="soft" color="blue">Soft</Badge>

Surface

Elevated appearance with subtle background.

<Badge variant="surface" color="blue">Surface</Badge>

Outline

Bordered with transparent background.

<Badge variant="outline" color="blue">Outline</Badge>

Ghost

Minimal styling, no background or border.

<Badge variant="ghost" color="blue">Ghost</Badge>

Classic

A refined, subtle appearance.

<Badge variant="classic" color="blue">Classic</Badge>

Colors

Badges support all accent colors for semantic meaning.

<Flex gap="2" wrap="wrap">
  <Badge color="gray">Neutral</Badge>
  <Badge color="blue">Info</Badge>
  <Badge color="green">Success</Badge>
  <Badge color="amber">Warning</Badge>
  <Badge color="red">Error</Badge>
  <Badge color="violet">New</Badge>
</Flex>

Strong Ink

Badge text always reads the strong ink for its color. Gray badges with a solid fill use step 12, so no extra prop is needed.

<Flex gap="2">
  <Badge color="gray" variant="solid">Draft</Badge>
  <Badge color="red">Failed</Badge>
</Flex>

Sizes

Control badge size with the size prop.

<Flex gap="2" align="center">
  <Badge size="1">Size 1</Badge>
  <Badge size="2">Size 2</Badge>
  <Badge size="3">Size 3</Badge>
  <Badge size="4">Size 4</Badge>
</Flex>

With Tooltip

Add tooltips to provide additional context.

<Badge
  color="amber"
  tooltip="This item requires your attention before proceeding"
  tooltipSide="right"
>
  Pending Review
</Badge>

Status Indicators

Common pattern for displaying status with badges.

<Flex direction="column" gap="2">
  <Flex align="center" gap="2">
    <Badge color="green">Published</Badge>
    <Text size="2">Article is live</Text>
  </Flex>
  <Flex align="center" gap="2">
    <Badge color="amber">Draft</Badge>
    <Text size="2">Work in progress</Text>
  </Flex>
  <Flex align="center" gap="2">
    <Badge color="red">Archived</Badge>
    <Text size="2">No longer visible</Text>
  </Flex>
</Flex>

© 2026 Kushagra Dhawan. Licensed under MIT. GitHub.

Theme

Accent color

Gray color

Appearance

Radius

Scaling

Panel background