Link
Styling for anchor hyperlinks
Introduction
Links let users navigate to a new URL. In Bifrost, links are styled with CSS classes — there is no React Link component. Apply a Bifrost link class to a native anchor element so the browser keeps features like "copy link" and "open in new tab".
For actions that do not navigate — like opening a modal or expanding a section — use a button element instead, optionally styled as a link.
Variants
- Default link: Inline text link inside a paragraph or content block
- Title link: Stand-alone link, like a title or table of contents entry
- Neutral link: Unstyled clickable block, useful for cards or resetting link styling
Interactive demo
Try the interactive demo below to explore the Link component.
Write descriptive link text
Link text should describe where the link goes, so it makes sense on its own. Screen readers often let users skim a list of links out of context, and generic text like "click here" or "read more" gives them nothing to go on.
Use descriptive link text that makes sense out of context.
Avoid generic text like "click here" or "read more" — it hides the destination.
Best practices
- Don't say "link": Screen readers already announce the element as a link.
- Keep underlines in body text: Inside running text, leave the default underline on inline links. It's the strongest visual cue that something is clickable.
- Match element to intent: Anchors for navigation, buttons for actions.