Focus states

Focus states are the unsung heroes of the web experience. They're essential for users with impairments that make it hard to use a mouse, or who prefer a different method of navigation. They show the user exactly which interactive element they’re on as they tab through the screen using a keyboard or assistive technology.

Three circles. The middle circle has an offset border to represent a focus state.
Principles
An eye icon with a focus state border around it.
Highly visible

Accessibility is a must. We’re here to open the world up, not shut people out. So our focus states are designed to go above and beyond the requirements in WCAG 2’s focus appearance criteria.

A button in focus on forest green theme, and a button in focus on bright green theme.
Branded for scale

We reuse colours from our existing palette so our focus states feel on-brand and look good against other colours on the screen. The designs scale across all colour themes so they stand out on any of our surfaces.

An icon that indicates tabbing.
Never distracting

We only show focus states for users that need them. On tab, not on click. It’s a win-win strategy because it means we can be highly accessible, while also reducing visual noise wherever it’s not needed.

Buttons

Style overview

For buttons and components where at least one variant has a filled surface colour that’s different to the screen background, the focus state is a highly contrasting 2 pixel border.

A comparison of a regular button and a button in focus. The focused button has a border around it.

Visibility across colour themes

A 2px transparent offset between the focus border and the component keeps the border clearly visible no matter the surface theme.

A comparison of a regular button and a focused button. The same image is repeated on 4 different surface colour themes: light, dark, bright green, and forest green.

Focus border colour

We almost always use our interactive-primary colour for the focus state border. But very occasionally, we might use a different colour token if it helps to keep things looking intentional. For example, on our negative button we make the focus border colour sentiment-negative to match the button surface because it looks cleaner visually. 

A comparison of a standard negative button, and a focused negative button. The focused negative button has a red border.
Form inputs 

A 3px border in our highly contrasting interactive-primary colour really makes input focus states stand out from the crowd. 

A comparison of a regular form input, and a focused form input. The focused input has a thicker border and the border colour changes to forest green.
Interactive icons

Default guidance

For interactive icons, the focus state is a solid 2 pixel border in our interactive-primary colour. We also round the corners of this container by 4 pixels to keep it on brand. 

A comparison of a regular icon and an icon in focus. The focused on has a border around it.

Exceptions

There are a very small number of exceptions where we make the icon's focus state completely rounded to add visual style:

A comparison of an icon in a circular container showing the focused and unfocused variants.
  1. For close or back buttons that are already in a circular container.
A comparison of an unfocused and focused info circle within a summary component.
  1. If the icon has a round border, like an info circle, and we know that it will never change to a different shaped icon.
Tabs and navigation

For tabs and other navigational components, we need to be mindful of the selected state, which can be different to what’s in focus. To keep it crystal clear which tab is selected and which is in focus, we only put the focus state container around the label itself, and not the whole tab.

A comparison of regular tabs with focused tabs.
Other interactive elements

For other UI elements that don’t need to appear in a form alongside inputs, we stick to a 2 pixel border. Here’s an example of a navigation option in focus.

A comparison of navigation options: regular vs focused.
Tips for custom components

Any UI element that users can interact with needs a focus state, so you’ll need to apply the styles listed above to any custom components your team builds. Never just rely on the browser default styles as they look off-brand and probably won’t have enough contrast against our colours to be accessible. 

The system styles are designed to work for all use cases. But if you ever get really stuck and need something custom, make sure you follow the WCAG 2 focus appearance guidelines to keep it accessible. Don’t forget to test on dark mode and all of our other surface themes too. That way you can make sure that the focus states always stay visible and pass WCAG requirements. 

You should also make sure the focus state is never obscured. For example, the user shouldn’t be able to tab to an element that they can’t see because it’s offscreen or hidden within an unopened dropdown menu.