Design Tokens Component Groups

Component Groups

Component tokens let you style groups of related components at once. Rather than overriding individual component styles, these tokens propagate the style across every component that shares a given visual quality.

Form Controls

Components such as input, select, textarea, checkbox, and others share styles defined with the --wa-form-control-* prefix.

Not every form control uses all of these custom properties. For example, radio defines its own height and border radius to achieve its familiar shape but shares many other styles with other components for a cohesive look and feel. Similarly, button defines many of its own styles but matches the height and border width of other form controls.

<form class="wa-stack">
  <wa-input label="Input" placeholder="Placeholder"></wa-input>
  <wa-select label="Select" value="option-1">
    <wa-option value="option-1">Option 1</wa-option>
    <wa-option value="option-2">Option 2</wa-option>
    <wa-option value="option-3">Option 3</wa-option>
  </wa-select>
  <wa-textarea label="Textarea" placeholder="Placeholder"></wa-textarea>
  <wa-radio-group label="Radio group" name="a" value="1">
    <wa-radio value="1">Option 1</wa-radio>
    <wa-radio value="2">Option 2</wa-radio>
    <wa-radio value="3">Option 3</wa-radio>
  </wa-radio-group>
  <wa-checkbox>Checkbox</wa-checkbox>
  <wa-switch>Switch</wa-switch>
  <wa-slider label="Range"></wa-slider>
  <wa-button>Button</wa-button>
</form>

Buttons

In addition to sharing styles with form controls, buttons have their own subset of unique tokens.

Panels

Panel tokens apply to components with larger, contained surface areas, like callout, card, details, and dialog.

<div class="wa-stack">
  <wa-callout>
    <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
    This is a simple callout with an icon.
  </wa-callout>
  <wa-card>Here's a basic, no-nonsense card.</wa-card>
  <wa-details summary="Details">
    <code>wa-details</code>, at your service.
  </wa-details>
</div>

Tooltips

Tooltip tokens apply to the tooltip component and built-in tooltips in other components like slider and copy button.

This is a tooltip 
<wa-button id="tooltip-demo" appearance="plain">
  <wa-icon label="Target" name="bullseye"></wa-icon>
</wa-button>
<wa-tooltip for="tooltip-demo" open trigger="manual">This is a tooltip</wa-tooltip>
    No results