Link

Inline text link. Use for navigation between pages, external references, or in-paragraph actions that take the user somewhere. For actions that mutate state (submit, delete), use Button. Subtle variant for low-emphasis links. Optional .lb-link__icon slot for trailing icons that signal destination type — external-link, arrow-right (continue), download.

a11y (built in): .lb-link is styling only — every link is a real <a href> and no JS controller binds to it. The underline is permanent (text-decoration: underline, kept by --subtle, which changes colour only), so a link is never signalled by colour alone, and :focus-visible draws the shared focus outline (--lb-border-focus) offset clear of the text. The trailing icon is decoration — aria-hidden="true", sized in 1em so it tracks the size variant — which means destination meaning has to live in the link text, not the glyph.

Usage: Copy the full combo — base plus size, lb-link lb-link--medium: --small/--large swap the action type ramp (the bare base falls back to the medium scale) and --subtle stacks on any size. The base is inline-flex with a built-in gap, so the trailing .lb-link__icon needs no margin — it is an empty <span data-lb-icon="…"> hydrated by LB.initIcons(), which LB.init() runs automatically at DOMContentLoaded: load js/lb.js when you use the icon slot, and for links injected later call LB.initIcons(root) again (idempotent — hydrated spans are skipped). No events, no per-element JS handle.

Sizes & variants

Small link Medium link Large link Subtle link

With trailing icon

Add a .lb-link__icon after the text to signal the destination type. Three conventions ship in our icon library: external-link (opens new tab/leaves the site), arrow-right (continue / read more), download (file download). Pair external links with target="_blank" + rel="noopener noreferrer" for security; append <span class="lb-visually-hidden">(opens in new tab)</span> inside the link if the surrounding text doesn't already say so — an aria-label would replace the visible text rather than add to it.

External link — leaves the site
Lucide icons Lucide icons Lucide icons
Continue — direction of progression
Read more Continue to checkout Learn more
Download — file action
Annual report.pdf Spreadsheet (CSV)
In a paragraph

We use icons from Lucide , vendored locally for offline use. Read the licensing notes to confirm attribution.