Chip

A chip component for tags and filters with dismiss or toggle actions.

vu-chip · @velkin/react/chip

Copy page

Import

React

npm i @velkin/react

import { VuChip } from "@velkin/react/chip";

Examples

API

Props

Prop	Type	Default	Description
label	`string`	""	Plain-text fallback when the default slot has no meaningful content.
value	`string`	""	Stable id for lists, filters, and `vu-close` / `vu-change` detail.
removable	`boolean`	false	Shows dismiss control; `close()` fires cancelable `vu-close`. Default: `false`.
color	VuChipColor	"default"	Intent token only (no arbitrary CSS colors). Default: `"default"`.
radius	VuChipRadius	"full"	Corner preset (`none`/`sm`/`md`/`lg`/`full`). Default: `"full"`.
size	VuChipSize	"md"	Padding/type scale; `sm`\|`md`\|`lg` match button, `xs`/`xl` are density extras. Default: `"md"`.
iconstart	`string`	—	Iconify id for the leading icon.
iconend	`string`	—	Iconify id for the trailing icon.
loading	`boolean`	false	Loading overlay; hides label chrome like `vu-button`. Default: `false`.
disabled	`boolean`	false	Disables interaction. Default: `false`.
variant	VuChipVariant	"soft"	Paint recipe. Default: `"soft"`.
selected	`boolean`	false	Toggle/filter selected state; sets `aria-pressed` when interactive. Default: `false`.
interactive	`boolean`	false	Renders the label as a `<button>` when `href` is empty. Default: `false`.
iconOnly	`boolean`	false	Square 1:1 chip; hides the label and uses it as `aria-label`. Default: `false`.
href	`string`	""	When set, renders the label as an `<a>` instead of static text.
target	`string`	""	Anchor target when `href` is set.
rel	`string`	""	Anchor rel when `href` is set.
closelabel	`string`	—	Accessible name for dismiss; empty uses the locale catalog.
arialabel	`string`	—	Accessible name override for the interactive label control.
iconStart	`string`	""	Iconify id for the leading icon.
iconEnd	`string`	""	Iconify id for the trailing icon.
closeLabel	`string`	""	Accessible name for dismiss; empty uses the locale catalog.
ariaLabel	`string`	""	Accessible name override for the interactive label control.

Events

Event	Detail	Description
vu-close	VuChipCloseDetail	Cancelable; default action removes the host.
vu-change	VuChipChangeDetail	When `interactive` and the user toggles `selected`.

Slots

Slot	Description
—	- Primary label; when empty, the string `label` prop is shown.
start	Leading content before icons and label.
end	Trailing content after label and before dismiss.

CSS parts

Part	Description
chip	Outer pill surface.
control	Label region (span, button, or anchor depending on mode).
start	Leading slot wrapper.
end	Trailing slot wrapper.
icon	Each leading or trailing Iconify icon.
close	Dismiss control when `removable` (same UI as vu-alert `close`).
loading-overlay	Loading scrim.
loading-spinner	Spinner node.

Methods

Method	Description
close	- Fires cancelable `vu-close`; removes the host when not prevented.

Types

Name	Definition
VuChipChangeDetail	`{ selected: boolean; value: string; label: string; }`
VuChipCloseDetail	`{ label: string; value: string; reason: VuChipCloseReason; }`
VuChipColor	`"default" \| "primary" \| "success" \| "warning" \| "danger"`
VuChipRadius	`"sm" \| "md" \| "lg" \| "none" \| "full"`
VuChipSize	`"sm" \| "md" \| "lg" \| "xs" \| "xl"`
VuChipVariant	`"solid" \| "outline" \| "soft" \| "ghost" \| "dot"`

Import

React

API

Props

Prop	Type	Default	Description
label	`string`	""	Plain-text fallback when the default slot has no meaningful content.
value	`string`	""	Stable id for lists, filters, and `vu-close` / `vu-change` detail.
removable	`boolean`	false	Shows dismiss control; `close()` fires cancelable `vu-close`. Default: `false`.
color	VuChipColor	"default"	Intent token only (no arbitrary CSS colors). Default: `"default"`.
radius	VuChipRadius	"full"	Corner preset (`none`/`sm`/`md`/`lg`/`full`). Default: `"full"`.
size	VuChipSize	"md"	Padding/type scale; `sm`\|`md`\|`lg` match button, `xs`/`xl` are density extras. Default: `"md"`.
iconstart	`string`	—	Iconify id for the leading icon.
iconend	`string`	—	Iconify id for the trailing icon.
loading	`boolean`	false	Loading overlay; hides label chrome like `vu-button`. Default: `false`.
disabled	`boolean`	false	Disables interaction. Default: `false`.
variant	VuChipVariant	"soft"	Paint recipe. Default: `"soft"`.
selected	`boolean`	false	Toggle/filter selected state; sets `aria-pressed` when interactive. Default: `false`.
interactive	`boolean`	false	Renders the label as a `<button>` when `href` is empty. Default: `false`.
iconOnly	`boolean`	false	Square 1:1 chip; hides the label and uses it as `aria-label`. Default: `false`.
href	`string`	""	When set, renders the label as an `<a>` instead of static text.
target	`string`	""	Anchor target when `href` is set.
rel	`string`	""	Anchor rel when `href` is set.
closelabel	`string`	—	Accessible name for dismiss; empty uses the locale catalog.
arialabel	`string`	—	Accessible name override for the interactive label control.
iconStart	`string`	""	Iconify id for the leading icon.
iconEnd	`string`	""	Iconify id for the trailing icon.
closeLabel	`string`	""	Accessible name for dismiss; empty uses the locale catalog.
ariaLabel	`string`	""	Accessible name override for the interactive label control.

Events

Event	Detail	Description
vu-close	VuChipCloseDetail	Cancelable; default action removes the host.
vu-change	VuChipChangeDetail	When `interactive` and the user toggles `selected`.

Slots

Slot	Description
—	- Primary label; when empty, the string `label` prop is shown.
start	Leading content before icons and label.
end	Trailing content after label and before dismiss.

CSS parts

Part	Description
chip	Outer pill surface.
control	Label region (span, button, or anchor depending on mode).
start	Leading slot wrapper.
end	Trailing slot wrapper.
icon	Each leading or trailing Iconify icon.
close	Dismiss control when `removable` (same UI as vu-alert `close`).
loading-overlay	Loading scrim.
loading-spinner	Spinner node.

Methods

Method	Description
close	- Fires cancelable `vu-close`; removes the host when not prevented.

Types

Name	Definition
VuChipChangeDetail	`{ selected: boolean; value: string; label: string; }`
VuChipCloseDetail	`{ label: string; value: string; reason: VuChipCloseReason; }`
VuChipColor	`"default" \| "primary" \| "success" \| "warning" \| "danger"`
VuChipRadius	`"sm" \| "md" \| "lg" \| "none" \| "full"`
VuChipSize	`"sm" \| "md" \| "lg" \| "xs" \| "xl"`
VuChipVariant	`"solid" \| "outline" \| "soft" \| "ghost" \| "dot"`

Import

Examples

API

Props

Events

Slots

CSS parts

Methods

Types

Related

Data display

Guides

Browse

Import

Examples

API

Props

Events

Slots

CSS parts

Methods

Types

Related

Data display

Guides

Browse