Chip

Chip is a compact, noninteractive annotation for labels, categories, and status. Use semantic tones to communicate state without turning metadata into a control.

Use it when information needs a small visual label but does not need button, link, or selection behavior.

Preview

Reduce motion:Off

Inspect

DefaultReadyBetaDeprecated

Installation

npx shadcn@latest add @sona-ui/chip

Usage


export default function ChipDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Chip>
        <Chip.Label>Default</Chip.Label>
      </Chip>
      <Chip tone="success">
        <Chip.Icon aria-hidden="true">
          <Check />
        </Chip.Icon>
        <Chip.Label>Ready</Chip.Label>
      </Chip>
      <Chip tone="warning">
        <Chip.Label>Beta</Chip.Label>
      </Chip>
      <Chip tone="danger">
        <Chip.Label>Deprecated</Chip.Label>
      </Chip>
    </div>
  );
}

Props

Property	Type	Default	Description
`tone`	`ChipTone`	`"neutral"`	The semantic color used to communicate the chip's status.
`variant`	`ChipVariant`	`"soft"`	The surface treatment applied to the chip.
`size`	`ChipSize`	`"md"`	The compactness of the chip.

Accessibility

Chip renders a noninteractive span. Its text should describe the status or category directly. Do not use Chip when the element needs to respond to pointer or keyboard input.

Do not rely on color alone for meaning. Pair each semantic tone with clear text such as Ready, Pending, or Failed.

Styling

Use tone for meaning, variant for visual emphasis, and size for density. Use className only for product-specific spacing or typography adjustments.

Was this component useful?

Your feedback helps us improve the documentation.

Related components

Reviewers

Assignment Cluster

new

Morph Surface

beta