Tag

Use an interactive label for markers, filters, or path segments.

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 Tag for bounded label content with a public close action. Closing and selection have different meanings; use a separate Button or selection control when that is the intended interaction.

closable displays the close action, and onClose asks the page to remove the data. Closing does not modify the page’s list automatically.
variant, shape, and toggle control appearance, shape, and toggle behavior respectively. parts configures only the generated close Button.
The built-in close button name follows LocaleProvider and supports Provider messages overrides. The caller still owns tag content and removal after onClose.

Import

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

Usage

Removable

Shapes

With dots

API Reference

Property	Type	Default	Example	Description
`parts`	`ComponentPartsOf<{ Button: typeof Button }>`	`—`	`parts={partsOptions}`	Configure the close Button generated by Tag. Does not affect Buttons supplied inside explicit children.
`variant`	`"default" \| "active"`	`"default"`	`variant="default"`	Appearance variant. default uses a Black/4% background; active uses a Brand 10% background and Brand text.
`toggle`	`boolean`	`false`	`toggle`	Shorthand for Toggle mode. Internally sets Click={{ Idle: "Active", Active: "Idle" }} and whileClick=false. Frame exposes data-state="Active" to trigger the Brand active appearance and outputs aria-pressed. Explicit Click or whileClick values still take priority.
`closable`	`boolean`	`false`	`closable`	Show the built-in X remove control, which becomes visible on Tag hover.
`shape`	`"default" \| "left-arrow" \| "right-arrow"`	`"default"`	`shape="default"`	Shell shape for path or breadcrumb segments.
`onClose`	`(event: MouseEvent) => void`	`—`	`onClose={(value) => { /* handle value */ }}`	Callback when the X is clicked. Tag does not destroy itself; the consumer decides how to remove it.
`children`	`Snippet`	`—`	`<Tag>Content</Tag>`	Displayed label content rendered through the Frame children protocol. The component manages its close Button separately.