useFocusRing

Custom hook used to determine focus styling depending on modality. Returns CSS that can be applied to the component in order to show the correct focus outline.

Import

import { useFocusRing } from '@dynatrace/strato-components-preview/core';

Use cases

You can use the useFocusRing hook to apply focus styles to your components depending on the user's input modality (mouse vs. keyboard). By default, you can see the visual differences by tabbing to the elements.

CodeSandbox

Variants

Use the variant option to apply different styles depending on how the component is used. The supported variants are: neutral, primary, success, warning, and critical.

CodeSandbox

When applying all focus outlines (if the buttons are focused via keyboard), this is what the variants would look like:

Ignore modality

Use the ignoreModality option to show the focus ring regardless of how the component was focused. Compare what happens when you click, versus when you tab to the element using a keyboard. If you click it, the focus ring is still applied. You may use it for components like text inputs or text areas, where clicking focuses the elements, so the user can already start typing.

CodeSandbox

Minimal

Use the isMinimal option for components surrounded by text, where the focus ring needs to fit a smaller space, such as links.

CodeSandbox