The product has one focus ring. It is a 2px vermilion line, offset from the control so the border does not eat it. It shows for keyboard focus, with :focus-visible, and it does not show for every mouse click. A ring on every click looks like a stuck error. No ring at all hides the path for anyone using a keyboard.
The ring has to clear both a light surface and a dark surface. Vermilion does that on bone and on the dark ground. Do not invent a new ring colour for each button fill. If a parent with overflow, or a sticky bar, cuts the ring, fix the parent. Removing the outline is not a fix.
The demo shows two buttons. Only the second, the keyboard one, carries the offset ring. The pointer button does not.
How to check it
- Tab through the screen. Every control shows the same ring, and a click does not leave one behind.
- Place the ring on a light surface and on a dark surface. It stays visible on both.
- Move a focused control to the edge of a card. The ring is complete, not clipped.
:focus {
outline: none;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}