Skip to content
Skip design navigation
Etesie Alpha
Loading account
States · Use the system

Apply interaction states

Start with native or headless state semantics, then point every visual channel at the shared tokens below.

Live specimen

One component, every interaction channel

Hover it, tab to focus it, hold to press it, or drag it. The real button recipe reads the shared state and focus-ring tokens.

Ready · hover, focus, press, or drag
Canonical output

State and focus-ring tokens

Why two channels?

The state-layer Tailwind examples use this filled specimen's primary/on-primary pairing. Keep the opacity token and substitute the component's own container/content roles.

Hover layer--md-sys-state-hover-state-layer-opacity · 8%
Copy token 
hover:[background:color-mix(in_srgb,var(--md-sys-color-on-primary)_var(--md-sys-state-hover-state-layer-opacity),var(--md-sys-color-primary))]
Focus layer--md-sys-state-focus-state-layer-opacity · 10%
Copy token 
focus-visible:[background:color-mix(in_srgb,var(--md-sys-color-on-primary)_var(--md-sys-state-focus-state-layer-opacity),var(--md-sys-color-primary))]
Pressed layer--md-sys-state-pressed-state-layer-opacity · 10%
Copy token 
active:[background:color-mix(in_srgb,var(--md-sys-color-on-primary)_var(--md-sys-state-pressed-state-layer-opacity),var(--md-sys-color-primary))]
Dragged layer--md-sys-state-dragged-state-layer-opacity · 16%
Copy token 
data-[et-dragging]:[background:color-mix(in_srgb,var(--md-sys-color-on-primary)_var(--md-sys-state-dragged-state-layer-opacity),var(--md-sys-color-primary))]
Disabled container--md-sys-state-disabled-container-opacity · 12%
Copy token 
disabled:[background:color-mix(in_srgb,var(--md-sys-color-on-surface)_var(--md-sys-state-disabled-container-opacity),transparent)]
Disabled content--md-sys-state-disabled-content-opacity · 38%
Copy token 
disabled:[color:color-mix(in_srgb,var(--md-sys-color-on-surface)_var(--md-sys-state-disabled-content-opacity),transparent)]
Focus ring width--md-comp-focus-ring-width · 3px
Copy token 
[outline-width:var(--md-comp-focus-ring-width)]
Focus ring active width--md-comp-focus-ring-active-width · 8px
Copy token 
[outline-width:var(--md-comp-focus-ring-active-width)]
Focus ring color--md-comp-focus-ring-color · var(--md-sys-color-secondary)
Copy token 
[outline-color:var(--md-comp-focus-ring-color)]
Focus ring offset--md-comp-focus-ring-outward-offset · 2px
Copy token 
[outline-offset:var(--md-comp-focus-ring-outward-offset)]
Focus ring duration--md-comp-focus-ring-duration · var(--md-sys-motion-duration-long4)
Copy token 
[animation-duration:var(--md-comp-focus-ring-duration)]