Preview

Usage

<cs-token>Default</cs-token>
<cs-token dismissible>Dismissible</cs-token>
<cs-token disabled>Disabled</cs-token>

Properties

aria-labelstring default: null

Adds an aria-label to the token.

Use this if the label is not plain text.

descriptionstring default: ''

Further information about the token that appears below the label.

disabledboolean default: false

Determines whether the token is disabled.

dismiss-labelstring default: 'Remove'

Adds an aria-label to the dismiss button.

label-tagstring default: ''

A label tag that provides additional guidance, shown next to the label.

read-onlyboolean default: false

Specifies if the control is read-only. A read-only control is still focusable.

tagsReadonlyArray<string>

A list of tags giving further guidance about the token.

tooltip-contentstring

Content to display in the tooltip when variant="inline". The tooltip appears when the token label is truncated due to insufficient space.

Only applies to plain text labels.

variantTokenProps.Variant default: 'normal'

Specifies the token's visual style and functionality.

For inline only label, icon and dismiss button are displayed.

Defaults to normal if not specified.

Slots

icon

An icon at the start of the token.

When variant="normal", if a description or tags are set, icon size should be normal.

When variant="inline", icon size should be small.

label

Slot for the label of the token as text or an element.

For variant="inline", only plain text is supported, for example, strings or numbers.

Events

dismissCustomEvent<void>

Called when the user clicks on the dismiss button.

Make sure that you add a listener to this event to update your application state.