Actions
Actions are surfaces that invite user interaction. They are the “buttons” and “controls” of your interface.
Action Surfaces
Section titled “Action Surfaces”surface-action
Section titled “surface-action”The primary interactive surface. Used for buttons, toggles, and active states.
surface-action-soft
Section titled “surface-action-soft”A lower-emphasis interactive surface. Useful for secondary buttons or ghost buttons.
States
Section titled “States”Interactive elements have standard states that work across all surfaces.
Hover & Active
Section titled “Hover & Active”The system automatically generates hover and active states for all action surfaces.
state-selected
Section titled “state-selected”Used to indicate that an item is currently chosen (e.g., a selected item in a list). This maps to the system’s “Highlight” color.
Selected Item
state-disabled
Section titled “state-disabled”Used for non-interactive items. This maps to the system’s “GrayText” color and reduces contrast while maintaining legibility.
Focus Indicators
Section titled “Focus Indicators”Accessible focus indicators are critical for keyboard navigation. The system provides a universal focus ring that adapts to the brand color and ensures contrast.
Apply the .focus-ring utility class to interactive elements. It applies styles on :focus-visible.
<button class="surface-action focus-ring">Click Me</button>Token Reference
Section titled “Token Reference”Interactive elements use the standard surface tokens, plus specific tokens for states and focus.
| Token Variable | Description | Usage |
|---|---|---|
--focus-ring-color | The universal focus ring color. | outline-color: var(--focus-ring-color) |
--surface-token | The background of the action. | background: var(--surface-token) |
--text-high-token | The text color of the action. | color: var(--text-high-token) |