Focus

CSS core

Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

Focus — use Tab to focus the control and see the two-tone ring.

Focus on ground

Source

<p>Focus — use Tab to focus the control and see the two-tone ring.</p>
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Focus on surface</span></button>
<button type="button" data-kit-role="primary-action"><span data-kit-region="label">Focus on accent</span></button>
<p style="background: var(--kit-ground-charcoal); color: var(--kit-on-ground-ink); padding: var(--kit-inset-wide);"><span tabindex="0">Focus on ground</span></p>

Previous, Accent Next, Reversed