<!-- AUTO-GENERATED FILE. Do not edit manually. -->

# Token Reference Table

This table lists all tokens for this component:

| Token | Description |
|-------|------------|
| btn.height.@ | Controls how tall switch buttons appear (segmented control buttons that allow users to toggle between different options). This determines the vertical size of each switch button.<br>CSS variable: --wm-switch-btn-height |
| btn.padding | Controls the internal spacing inside switch buttons (the space between the button content and its border). This creates breathing room around the button text and icons.<br>CSS variable: --wm-switch-btn-padding |
| btn.border.width | Controls the thickness of the border around switch buttons. This creates the outline that defines the button shape and makes it visible to users.<br>CSS variable: --wm-switch-btn-border-width |
| btn.border.style | Controls the style of the border around switch buttons. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots, 'none' removes the border.<br>CSS variable: --wm-switch-btn-border-style |
| btn.border.color.@ | Sets the color of the border around switch buttons. This determines the color of the outline that defines the button shape in its default/unselected state.<br>CSS variable: --wm-switch-btn-border-color |
| btn.radius | Controls the corner rounding of switch buttons. When set to 'pill', the buttons appear with fully rounded ends, creating a pill-shaped appearance.<br>CSS variable: --wm-switch-btn-radius |
| btn.icon.size | Controls how large icons appear in switch buttons (symbols that represent different switch options). This affects the size of any icons used within the switch buttons.<br>CSS variable: --wm-switch-btn-icon-size |
| btn.background.@ | Sets the background color of switch buttons. When set to 'none', the buttons have no background color, making them transparent.<br>CSS variable: --wm-switch-btn-background |
| btn.color.@ | Sets the text color of switch buttons (the color of text content within the buttons). This should contrast well with the background for readability.<br>CSS variable: --wm-switch-btn-color |
| btn.text-decoration | Controls the text decoration of switch buttons. 'none' removes any decorative lines, 'underline' adds a line under the text, 'overline' adds a line above the text, 'line-through' adds a line through the middle of the text.<br>CSS variable: --wm-switch-btn-text-decoration |
| btn.state.layer.color.@ | Sets the color of the state layer that appears when users hover, focus, or interact with switch buttons. This creates visual feedback to show that the button is interactive and responsive to user actions.<br>CSS variable: --wm-switch-btn-state-layer-color |
| btn.state.layer.opacity | Controls the transparency of the state layer that appears during user interactions (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-switch-btn-state-layer-opacity |