Chip

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.

Chip 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.

Chip was called Badge before 0.21.0. It grows out of the Badge from Radix Themes.

Playground

Chip

Installation

npm install @kushagradhawan/kookie-ui

Usage

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

Props

PropTypeDefaultDescription
size'1' | '2' | '3' | '4''2'Controls the size of the chip. Supports responsive values.
variant'solid' | 'soft' | 'surface' | 'outline' | 'ghost' | 'raised''raised'The visual style of the chip.
colorAccentColor'gray'Rests gray. Set a color to mark a category.
radius'none' | 'small' | 'medium' | 'large' | 'full'-Override the default border radius.
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.

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

Soft

A subtle tinted background.

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

Surface

Elevated appearance with subtle background.

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

Outline

Bordered with transparent background.

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

Ghost

Minimal styling, no background or border.

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

Raised

A refined, subtle appearance.

<Chip variant="raised" color="blue">Raised</Chip>

Colors

Chips support all accent colors for semantic meaning.

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

Strong Ink

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

<Flex gap="3">
  <Chip color="gray" variant="solid">Draft</Chip>
  <Chip color="red">Failed</Chip>
</Flex>

Sizes

Control chip size with the size prop.

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

With Tooltip

Add tooltips to provide additional context.

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

Status Indicators

Common pattern for displaying status with chips.

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