Chat Token Component

This component is considered alpha. We're still finalising the API, so it may include a breaking change at any time — use it at your own risk.

Usage

Chat Token is the atomic token primitive for the Chat family. Set value to its canonical plain-text serialization and label to its visible and accessible fallback.

Use Chat Composer Attachment for pending files and image previews above the composer. Tokens are reserved for atomic inline values inside Composer Input or Tokenized Text.

import "@nordhealth/components/lib/ChatToken"

The action emits cancelable nord-token-remove with the canonical value. Composer Input owns actual mutation when the token belongs to its editor, so standalone consumers should remove or retain the token in response to that intent.

Examples

Appearance and removal

Use variant for Nord’s neutral, info, success, warning, danger, or highlight treatment. Consumer-provided label content remains in Light DOM. Add removable to show a localized native remove action; remove-label can replace its complete accessible name.

Accessibility

The token is contenteditable="false" inside an editable composer so keyboard selection treats it atomically. Keep label meaningful when the serialized value is machine-oriented, and do not rely on variant color alone to identify token state.

API reference

ChatToken

An atomic visual token used by Composer Input and Tokenized Text. It is named for what it is rather than where it started: the composer is one host, not the only one. Consumer children remain in the light DOM; the component only owns its optional generated label and remove button. The remove action stays native because this atomic control is embedded inside a contenteditable composite; Nord Button's form proxy and shadow control are inappropriate in that editing surface. Its glyph reuses Nord Icon.

<nord-chat-token></nord-chat-token>

Props

Property	Attribute	Description	Type	Default
`value`	`value`	Canonical plain-text serialization for this token.	`string`	`''`
`label`	`label`	Fallback accessible and visible label when no consumer content exists.	`string \| undefined`	—
`variant`	`variant`	Nord semantic color treatment.	`ChatTokenVariant`	`'neutral'`
`removable`	`removable`	Adds an accessible remove action. Composer Input owns actual removal.	`boolean`	`false`
`expandable`	`expandable`	Adds an accessible expand action which turns the token back into plain text. Composer Input owns the actual expansion.	`boolean`	`false`
`expandLabel`	`expand-label`	Optional complete expand-action label. Defaults to a localized label.	`string \| undefined`	—
`removeLabel`	`remove-label`	Optional complete remove-action label. Defaults to a localized label.	`string \| undefined`	—

Slots

Slot name	Description
`Default slot`	Consumer-owned token label or richer presentation.

Event	Detail Type	Description
`nord-token-remove`	`ChatTokenRemoveEvent`	Cancellable removal intent.
`nord-token-expand`	`ChatTokenExpandEvent`	Cancellable intent to become plain text again.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

Property	Description	Default
`--n-chat-token-remove-target-size`	Pointer target size around the remove glyph.	`calc(var(--n-line-height-form)+var(--n-space-xs))`

Light DOM & Tailwind. This component renders in the light DOM, so you can style it directly with your own CSS or Tailwind utility classes — there is no shadow boundary, and its default styles are low specificity, so your utilities win.

Dependencies

This component is internally dependent on the following components:

<nord-icon>
Icon
Icons are used to provide additional meaning or in places where text label doesn’t fit. Icon component allows you to display an icon from the Nordicons library.

Chat Token Alpha Light DOM & Tailwind