InlineLink

Overview

This component is a styled anchor element designed for inline text navigation within content, not for standalone navigation elements. It provides a consistent visual style for links while maintaining accessibility and supporting external link behavior.

Sizing

InlineLink inherits both its font family and font size from the surrounding text, so it always matches the run of text it sits in. It has no size prop — size the containing text instead.

This means the link needs an ancestor that declares a font size: a Body, Subheading, List, or an element carrying a typography class.

Examples

Basic Usage

The simplest usage requires only href and children props. The link takes its size from the Body it sits in.

Matching Smaller Text

Because the size is inherited, a link inside <Body size="xs"> scales down with it — no prop needed.

Open in New Tab

Use the openInNewTab prop to open links in a new browser tab. This is particularly useful for external links.

Import

import { InlineLink } from '@im/integral/components/styled';

Props