Looks supply a visual treatment. Append a condition to choose when it applies. They do not manage interaction state or event handlers.
| Class | Effect |
|---|---|
look-dimmed |
64% opacity |
look-pressed |
96% scale, disabled under reduced motion |
look-faded, look-faded-down |
Zero opacity, with an optional downward shift |
look-shown |
Visible, opaque, pointer events enabled |
look-ring, look-ring-flat, look-ring-inset |
2px native outline with 2px, 0px or -2px offset |
look-ring-shadow, look-ring-shadow-flat |
Shadow focus ring with an optional 1px gap |
<button class="btn look-ring@focus-visible look-pressed@active" type="button">Save</button>
<label class="input-shell look-ring-shadow@focus-within shadow-outline-color:focused-900">
Search <input type="search" />
</label>Choose one focus owner. Shadow rings restore a solid Highlight outline in forced
colors. Supply a matching shadow-outline-offset-color: for the gap when the
control uses a surface other than white. Transitions and cursor policy stay on
the element’s base classes.