Default

A pill-shaped display for tokens. Tokens show a name with automatic middle-truncation for long text. If no theme is provided, it defaults to light.

<Token name="Contact.FirstName" type="text" />

Type

Tokens come in two types: text for single-value tokens and list for repeating tokens. The list type displays a loop icon to indicate the token represents a collection.

<Stack gap="m" align="start">
  <Token name="Contact.FirstName" type="text" />
  <Token name="Contact.LineItems" type="list" />
</Stack>

Theme

The Token supports light (default) and dark themes to match its surrounding context.

<Stack gap="m" align="start">
  <Token name="Light Token" type="text" theme={TokenTheme.Light} />
  <Card theme={CardTheme.Dark}>
    <div className="space-inset-m">
      <Token name="Dark Token" type="text" theme={TokenTheme.Dark} />
    </div>
  </Card>
</Stack>

Draggable

Set isDraggable to enable drag-and-drop. The component handles creating a custom drag image automatically. Use the onDragStart and onDragEnd callbacks to respond to drag events.

<Token name="Drag Me" type="text" isDraggable />

Long names

Token names that exceed the available width are automatically truncated in the middle, preserving both the beginning and end of the name. Hover over the token to see the full name in a tooltip.

<div style={{ maxWidth: 200 }}>
  <Token name="Contact.This.Is.A.Really.Long.Name.And.Last.Name" type="text" />
</div>