Tokens / Chips

Small and large tokens for labels, filters, and removable chips in @bnotk/dsx.

Live Preview

Import

<link rel="stylesheet" href="@bnotk/dsx/css/tokens-chips.css">

Or use the full bundle:

<link rel="stylesheet" href="@bnotk/dsx/css/index.css">

Classes

Class	Purpose
`.dsx-token`	Base small token
`.dsx-token--removable`	Adds room for a remove affordance
`.dsx-token__remove`	Circular remove button / affordance
`.dsx-token--lg`	Large token size
`.dsx-token--main`	Main brand token
`.dsx-token--highlight`	Highlight-toned token
`.dsx-token-list`	Wrapping layout container for multiple tokens

Variants and behavior

Base tokens use var(--ds2-color-grey-1) with a var(--ds2-color-grey-2) border.
.dsx-token--main switches to a navy background with white text.
.dsx-token--highlight uses var(--ds2-color-highlight-light) and var(--ds2-color-highlight).
.dsx-token__remove shows an × via ::after and darkens on hover.
Large tokens increase padding, font size, gap, and remove-button size.

Example

<div class="dsx-token-list">
  <span class="dsx-token">Default</span>
  <span class="dsx-token dsx-token--main">Primary</span>
  <span class="dsx-token dsx-token--highlight dsx-token--removable">
    Filter: Open
    <button class="dsx-token__remove" type="button" aria-label="Remove filter Open"></button>
  </span>
</div>

Accessibility notes

Use a real <button type="button"> for removable chips.
Give the remove control an aria-label that includes the token name.
Keep the text label visible so the chip meaning is not color-only.