Components / Data display

Tag

A removable or clickable chip.

@ruckc/truss-ui Data display

Import

import { Tag } from '@ruckc/truss-ui';

intent

variant

size

icon

removable

clickable

extras

Prop	Type	Default	Description
`intent`	`Intent`	`'neutral'`	Semantic colour: `primary`, `neutral`, `success`, `warning` or `danger`.
`variant`	`'tonal' \| 'outlined'`	`'tonal'`	Visual style of the control.
`icon`	`IconSource`	—	A built-in glyph name, a `{ path, viewBox? }` definition or a snippet.
`iconSnippet` snippet	`Snippet`	—	Custom leading content (e.g. your own `<svg>`); wins over `icon`.
`size`	`'sm' \| 'md'`	`'md'`	Control size: `sm` (24px), `md` (32px, default) or `lg` (40px).
`onremove` event	`() => void`	—	Shows a remove button.
`removeLabel`	`string`	`'Remove'`	Accessible name of the remove button.
`onclick` event	`(e: MouseEvent) => void`	—	Makes the whole tag a button.
`children` required snippet	`Snippet`	—	Content, as a Svelte snippet.