Focus ring

FocusRing adds Bootstrap’s focus ring — a soft box-shadow — to any element on :focus, replacing the default browser outline with the token-driven ring. Use it on custom controls that need a consistent, themeable focus indicator.

Import

tsx

import { FocusRing } from '@metatoy/bootstrap-styled';

Example

The ring only paints on :focus, so the demo wraps a focusable element. Press Tab to move focus into the link (or click it) to see the ring appear.

Colored rings

Pass color for the .focus-ring-{color} variant, which recolors the ring using the matching theme color.

Props

Prop	Type	Default	Description
color	"primary" \| "secondary" \| "success" \| "danger" \| "warning" \| "info" \| "light" \| "dark"	—	Optional theme color for the ring (the `.focus-ring-{color}` variant). Omit for the default primary ring.
as	React.ElementType	—	Defaults to `<div>`; usually rendered as an `<a>` or `<button>`.

FocusRing renders a <div> by default; it typically wraps an interactive element via as="a" or as="button", and it accepts the anchor attributes href, target, rel, and download for the as="a" case. All native attributes and a ref are forwarded.

Theming

The ring is driven entirely by Bootstrap’s focus-ring custom properties, each with the oracle default inlined as a fallback:

--bs-focus-ring-width (0.25rem) — ring thickness
--bs-focus-ring-color (rgba(13, 110, 253, 0.25)) — ring color
--bs-focus-ring-opacity (0.25) — opacity used by the color variants
--bs-focus-ring-x, --bs-focus-ring-y, --bs-focus-ring-blur (all 0) — offset & blur

Override any of them (scoped inline or via the theme) to reshape the ring:

tsx

<FocusRing
as="button"
style={{ ['--bs-focus-ring-color']: 'rgba(25, 135, 84, 0.4)' }}
>
Custom green ring
</FocusRing>

Accessibility

A visible focus indicator is essential for keyboard users. FocusRing sets outline: 0 and substitutes the box-shadow ring, so make sure the ring stays clearly visible against your background — never remove focus styling without replacing it. The ring is driven by :focus; pair it with genuinely focusable elements (a real <button>, <a href>, or an element with tabIndex).

Explore in Ladle

Browse the default and colored rings in the interactive component gallery: FocusRing · Ladle ↗.