Icon link

IconLink pairs an icon with a text link using the exact Bootstrap .icon-link treatment — inline-flex alignment, a 0.375rem gap, a tuned underline offset, and an optional hover animation that nudges the icon.

Import

tsx

import { IconLink, BsIconChevronRight } from '@metatoy/bootstrap-styled';

Example

Render an icon (any node carrying the .bi class — such as Icon or a BsIcon* export) alongside the label. The helper styles the .bi slot, so it does not import the icon component itself.

Animated on hover

Add hover for the .icon-link-hover variant. On hover and keyboard :focus-visible the icon slides by --bs-icon-link-transform (default translate3d(.25em, 0, 0)).

Props

Prop	Type	Default	Description
hover	boolean	—	Animate the `.bi` icon on hover/focus (`.icon-link-hover`).
as	React.ElementType	—	Defaults to `<a>`.

IconLink renders an <a> by default and accepts all native anchor attributes (href, target, rel, download, …) plus a ref. Pass as to render a different element.

Theming

IconLink reads a few Bootstrap link tokens, each with the oracle default inlined:

--bs-link-color-rgb (13, 110, 253) and --bs-link-opacity (0.5) — the underline’s text-decoration-color
--bs-icon-link-transform (translate3d(.25em, 0, 0)) — the hover/focus icon shift

The icon slot inherits currentColor for its fill and is sized 1em, so it tracks the link’s color and font-size automatically.

Accessibility

IconLink is a real anchor — provide a meaningful href. When the icon is decorative (the common case, where the text already conveys the destination), keep it hidden from assistive tech with aria-hidden — the Icon / BsIcon* components render decorative by default. The hover transform is disabled under prefers-reduced-motion: reduce.

Explore in Ladle

Browse the basic and hover variants in the interactive component gallery: IconLink · Ladle ↗.