Chip

Display a category, status, or short detail as a compact inline label alongside text, icons, and lists.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Chip for compact content identification and composition. Declare selection, removal, or click behavior through the public API; a display-only Chip is not automatically a button or checkbox.

The default variant includes a dot. The background variant hides it by default; showDot can override either choice.
An as="leading" child replaces the dot, and as="trailing" adds trailing content. Pass size explicitly when size changes dynamically.

Import

import { Chip } from '@snowui-design-system/components';

Usage

Review

Sizes

Variants

Dot

Inheritance

API Reference

Property	Type	Default	Example	Description
`variant`	`"default" \| "background"`	`"default"`	`variant="default"`	Appearance variant. default shows the built-in Dot. background adds a colored background and a 0.5px border and hides the Dot by default.
`size`	`"sm" \| "lg"`	`—`	`size="sm"`	An explicit value takes priority. When omitted, reads a snapshot of the parent numeric size context at creation: values up to 12 use sm, larger values use lg, and no numeric context falls back to sm. It does not follow later parent size changes; pass size explicitly for dynamic changes. sm text is 12/16, lg text is 14/20.
`showDot`	`boolean`	`—`	`showDot`	When omitted, follows variant: shown for default and hidden for background. Explicit true or false controls the built-in Dot. An external leading child always hides it.
`children`	`Snippet`	`—`	`<Chip>Content</Chip>`	Content snippet with no parameters for label text and optional leading or trailing children. SnowUI children declare roles with as="leading" or as="trailing". An external leading child replaces the built-in Dot.