Focus ring
A focus ring shows which item has keyboard focus.
When to use
- You do not add the focus ring yourself. Every interactive component in the system already shows it.
- Read this page if you build your own control and need it to match.
When not to use
- As decoration. The ring only means keyboard focus.
- Removing it. Taking the outline off is the most common way to make a product unusable with a keyboard.
Guidance
Do
Leave the ring as it is. It appears when you move focus here with the keyboard, and not when you click with a mouse.
Don't
Do not set outline to none. You can still tab to this button, but nothing shows it has focus, so keyboard users lose their place.