Large Token

Large Token

Import: @bnotk/dsx/css/large-token.css

Live Preview

Classes

Class	Description
.dsx-large-token	Base large token wrapper
.dsx-large-token__label	Leading token label
.dsx-large-token--disabled	Disabled token state
.dsx-large-token-list	Wrapping list for multiple large tokens

Examples

<div class="dsx-large-token">
  <span class="dsx-large-token__label">Status</span>
  <input type="text" class="dsx-input dsx-input--flat dsx-input--sm" value="Active" aria-label="Status filter">
  <button type="button" class="dsx-btn dsx-btn--secondary dsx-btn--icon dsx-btn--sm dsx-btn--flat-left" aria-label="Remove status filter">
    <svg viewBox="0 0 16 16" aria-hidden="true"></svg>
  </button>
</div>