Component states
For consistency and lower cognitive load components should look and behave in similar ways. There is a set of states that all components should support.
Focus
Interactive components should support keyboard focus, that is to say when users navigate to the component using the keyboard the component should indicate that it currently has the keyboard focus.
Standard browser elements like links and buttons already support this with a standard ‘outline’; to keep our theme consistent we override the default with our own outline. The same outline must be used for Funnel components.
Our focus outline:
- is a 2px ring
- with 1px offset
- for light mode,
primary-200 - for dark mode,
primary-800
We have a utility to make this easy:
You can also re-create it yourself using standard tailwind classes, with the risk that this will fall out of sync with the utility class:
In practice you will want to apply the outline only when the element has keyboard focus. Use the focus-visible modifier for this:
