Interaction states

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 (fun-outline) to make this easy:

In practice you will want to apply the outline only when the element has keyboard focus. Use the focus-visible modifier for this:

Best practices

State hierarchy

When multiple states could apply, follow this priority order:

1. Disabled - Overrides all other states
2. Selected - Takes precedence over default and hover
3. Focus - Can combine with selected
4. Hover - Only applies when not disabled
5. Default - Base state

Accessibility considerations

• Always provide focus states for keyboard navigation
• Use focus-visible to show focus only when needed
• Ensure sufficient color contrast in all states
• Test with screen readers to verify state announcements

Implementation tips

• Use CSS custom properties for consistent state styling
• Leverage Tailwind’s state modifiers (hover:, focus:, disabled:)
• Test states across different themes (light/dark mode)
• Consider reduced motion preferences for animations