Docs / Helpers / Vertical rule

Vertical rule

The vertical counterpart to an <hr>. Vr renders a thin, self-drawing divider — the .vr helper — that separates inline items such as nav links, toolbar groups, or button clusters.

Import

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

Example

Place a Vr between inline siblings. Inside a flex row it stretches to the row’s height via align-self: stretch; on its own it falls back to min-height: 1em.

Props

Vr renders a <div> and forwards all native attributes plus a ref.

Theming

The rule paints itself with background-color: currentcolor at opacity: 0.25, so it inherits the surrounding text color — set color on the parent (or the Vr itself) to tint it. Its thickness comes from --bs-border-width (default 1px), so a theme override of that variable changes every rule at once:

/* thicker rules everywhere */
:root { --bs-border-width: 2px; }

Because the color derives from currentcolor, a Vr automatically adapts to light and dark color modes along with the text around it — no per-mode override needed.

Accessibility

• A Vr is a purely decorative divider with no text and no semantics, so it is correctly ignored by assistive tech — do not rely on it to convey grouping. Use real structure (lists, role="separator", headings) where the separation carries meaning.
• Its opacity: 0.25 is intentional; avoid lowering it further, as a too-faint rule can fail to read as a divider for low-vision users.

Explore in Ladle

Open in Ladle.