Interactive Focus styles

Utility classes designed to provide a consistent hover background and focus style for keyboard navigation. Focus rings will inherit border radius from rounded classes.

interactive

Applies interactive hover and focus styles to block-level elements that already have a border.

() => (
    <a href="#" className="interactive p-2 border rounded">
        Focus me
    </a>
)

interactive-pseudo

Provides the same interactive style as interactive, but implements the focus ring using a ::after pseudo-element. This requires the element to have a positioning class such as relative or absolute.

() => (
    <a href="#" className="interactive-pseudo relative p-2">
        Focus me
    </a>
)

interactive-pseudo-inset

Use when space is limited and the focus ring needs to be inset to avoid overflowing the element’s boundaries.

() => (
    <div className="overflow-hidden border border-weak">
        <a href="#" className="interactive-pseudo-inset block w-full relative p-2">
            Focus me
        </a>
    </div>
)

interactive-pseudo-protrude

Recommended for elements without padding, where a standard focus outline would appear too close to the content. This variant offsets the focus ring outward.

() => (
    <a href="#" className="interactive-pseudo-protrude interactive--no-background bg-primary relative">
        Focus me
    </a>
)

interactive--no-background

Additional helper class to remove the default background on hover

() => (
    <a href="#" className="interactive interactive--no-background bg-none p-2 border rounded">
        Focus me
    </a>
)