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

Link to This Section

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.

Custom Property	Description
--wa-form-control-background-color	Background color of form control inputs
--wa-form-control-border-color	Border color of form control inputs
--wa-form-control-border-style	Border line style of form control inputs
--wa-form-control-border-width	Border thickness of form control inputs
--wa-form-control-border-radius	Corner rounding of form control inputs
--wa-form-control-activated-color	Accent color when a control is active, checked, or selected
--wa-form-control-label-color	Text color of form control labels
--wa-form-control-label-font-weight	Font weight of form control labels
--wa-form-control-label-line-height	Line height of form control labels
--wa-form-control-value-color	Text color of the user-entered or selected value
--wa-form-control-value-font-weight	Font weight of the user-entered or selected value
--wa-form-control-value-line-height	Line height of the user-entered or selected value
--wa-form-control-hint-color	Text color of the hint text below a form control
--wa-form-control-hint-font-weight	Font weight of hint text
--wa-form-control-hint-line-height	Line height of hint text
--wa-form-control-placeholder-color	Text color of input placeholder text
--wa-form-control-required-content	Content appended to labels of required fields
--wa-form-control-required-content-color	Color of the required field indicator
--wa-form-control-required-content-offset	Inline spacing between the label text and required indicator
--wa-form-control-padding-block	Block (top/bottom) padding inside form control inputs
--wa-form-control-padding-inline	Inline (left/right) padding inside form control inputs
--wa-form-control-height	Computed height of single-line form controls; derived from padding and line height
--wa-form-control-toggle-size	Size of toggle controls (checkboxes, radios, switches)

Buttons

Link to This Section

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

Custom Property	Description	Preview
--wa-button-transform-hover	A transform function to apply to buttons on mouseover/hover	Mouse Over Me
--wa-button-transform-active	A transform function to apply to buttons when pressed/active	Press Me

Panels

Link to This Section

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

Custom Property	Description
--wa-panel-border-style	Border line style for panel components
--wa-panel-border-width	Border thickness for panel components
--wa-panel-border-radius	Corner rounding for panel components

Tooltips

Link to This Section

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

Custom Property	Description
--wa-tooltip-arrow-size	Size of the tooltip arrow/caret
--wa-tooltip-background-color	Background color of the tooltip body
--wa-tooltip-border-color	Border color of the tooltip
--wa-tooltip-border-style	Border line style of the tooltip
--wa-tooltip-border-width	Border thickness of the tooltip
--wa-tooltip-border-radius	Corner rounding of the tooltip
--wa-tooltip-content-color	Text color of tooltip content
--wa-tooltip-font-size	Font size of tooltip text
--wa-tooltip-line-height	Line height of tooltip text