Icon Chip · paneui

Installation

pnpm dlx shadcn@latest add @paneui/icon-chip

import { IconChip } from "@/components/ui/icon-chip"

<IconChip tone="primary">
  <SparklesIcon />
</IconChip>

The chip is always aria-hidden, so it is decoration only. Put the meaning in the text next to it.

A small rounded frame that holds one icon. Also accepts every prop of span.

tone= "neutral": "neutral" | "primary" | "success" | "warning" | "destructive" | "solid"; Surface and icon color.
size= "default": "sm" | "default" | "lg" | "xl"; Chip size (24 / 32 / 40 / 48px); the icon scales with it.
render: ReactElement | (props, state) => ReactElement; Replace the rendered <span> with another element.

Prop	Type	Default	Description
tone	"neutral" \| "primary" \| "success" \| "warning" \| "destructive" \| "solid"	"neutral"	Surface and icon color.
size	"sm" \| "default" \| "lg" \| "xl"	"default"	Chip size (24 / 32 / 40 / 48px); the icon scales with it.
render	ReactElement \| (props, state) => ReactElement	—	Replace the rendered `<span>` with another element.

The cva function behind IconChip, for styling other elements like a chip.

Prop	Type	Default	Description
tone	same as IconChip	—
size	same as IconChip	—