Typography Components

Link

Renders an accessible and themeable anchor link for navigation. Use this to direct users to other pages or external websites.

Source Edit this page

Basic usage

Link renders a styled anchor element for navigation. Unlike other typography components which default to inheritAppearance, Link renders its blue link color by default (no explicit appearance) with underline, and ships with focusVisible on for a keyboard focus outline.

Click here to learn more

<Link href="#">Click here to learn more</Link>

Appearances

Links render their blue link color by default. Set an explicit appearance to override: primary, accent, secondary, tertiary, success, danger, warning, info.

Primary Accent Secondary Success Danger Warning Info

<Row flexWrap>
  <Link primary href="#">Primary</Link>
  <Link accent href="#">Accent</Link>
  <Link secondary href="#">Secondary</Link>
  <Link success href="#">Success</Link>
  <Link danger href="#">Danger</Link>
  <Link warning href="#">Warning</Link>
  <Link info href="#">Info</Link>
</Row>

Variants

Link renders its own link colour rather than an appearance by default. filled puts the appearance's surface behind it, which is how you build a link that reads as a chip.

outline, the default filled info filled success

<Row flexWrap itemsCenter>
  <Link href="#">outline, the default</Link>
  <Link filled info href="#">filled info</Link>
  <Link filled success href="#">filled success</Link>
</Row>

Size inherits from context

Link defaults to inheritSize: true so a link inside a heading renders at the heading's font-size automatically. No size prop needed. The link keeps its own blue colour.

Body text with a link inline.

Subheading with a link inside.

Section heading with a link.

Page title link

<Col>
  <Text>Body text with a <Link href="#">link inline</Link>.</Text>
  <Title>Subheading with a <Link href="#">link</Link> inside.</Title>
  <SectionTitle>Section heading with a <Link href="#">link</Link>.</SectionTitle>
  <PageTitle>Page title <Link href="#">link</Link></PageTitle>
</Col>

Fixed size with noInheritSize

Pass noInheritSize to render the Link at its own size instead of the parent's, useful when a link inside a heading should stay at body-text size.

Subheading with a fixed-size link mid-sentence.

<Title>
  Subheading with <Link href="#" noInheritSize>a fixed-size link</Link> mid-sentence.
</Title>

Explicit sizes

When noInheritSize is set (or the parent has no size context), choose an explicit size with xs, sm, md (default), lg, xl.

Extra small link Small link Medium link (default)Large link Extra large link

<Col>
  <Link href="#" noInheritSize xs>Extra small link</Link>
  <Link href="#" noInheritSize sm>Small link</Link>
  <Link href="#" noInheritSize>Medium link (default)</Link>
  <Link href="#" noInheritSize lg>Large link</Link>
  <Link href="#" noInheritSize xl>Extra large link</Link>
</Col>

Styling

Use fontBold, fontSemibold, or italic for emphasis, or noUnderline to remove the default underline.

Bold link Semibold link Italic link Link without underline

<Col>
  <Link fontBold href="#">Bold link</Link>
  <Link fontSemibold href="#">Semibold link</Link>
  <Link italic href="#">Italic link</Link>
  <Link noUnderline href="#">Link without underline</Link>
</Col>

Hover state

Links keep an underline at rest. With noUnderline, the underline appears on hover for affordance. Links also render a keyboard focus-visible outline by default for keyboard users (opt out with noFocusVisible).

Underlined at rest, stays underlined on hover No underline at rest, hover to reveal it

<Col>
  <Link href="#">Underlined at rest, stays underlined on hover</Link>
  <Link noUnderline href="#">No underline at rest, hover to reveal it</Link>
</Col>

External links

Pass the external prop and Link auto-applies target="_blank" and rel="noopener noreferrer" for safe cross-origin navigation.

VaneUI on GitHub

<Link href="https://github.com/vaneui/vaneui" external>VaneUI on GitHub</Link>

Manual target="_blank"

Setting target="_blank" directly also auto-applies rel="noopener noreferrer". No need to spell it out.

Open in a new tab

<Link href="https://github.com/vaneui/vaneui" target="_blank">Open in a new tab</Link>

Inline in Text

Links integrate naturally with surrounding prose. Drop them inline inside Text and they inherit the parent size.

Check out our documentation to learn more about the features. You can also visit the GitHub repository for source code.

<Text>
  Check out our <Link href="#">documentation</Link> to learn more about the features.
  You can also visit the <Link href="#">GitHub repository</Link> for source code.
</Text>

Link is inline, so marginT, marginB, and marginY have no visual effect. Use marginX for inline-side spacing, or className for an exact value.

Inherits parent Text size

Links inside body text inherit the surrounding Text size. Set the size on the parent and the Link follows along.

Read the terms and conditions before proceeding.

Visit our help center for more information.

Check out the getting started guide to begin.

<Col>
  <Text sm>Read the <Link href="#">terms and conditions</Link> before proceeding.</Text>
  <Text>Visit our <Link href="#">help center</Link> for more information.</Text>
  <Text lg>Check out the <Link href="#">getting started guide</Link> to begin.</Text>
</Col>

With icons

Combine links with icons using Row for visual navigation cues.

Open in new window

View documentation

Source on GitHub

<Col>
  <Row itemsCenter>
    <ExternalLink size={14} />
    <Link href="#">Open in new window</Link>
  </Row>
  <Row itemsCenter>
    <FileText size={14} />
    <Link href="#">View documentation</Link>
  </Row>
  <Row itemsCenter>
    <GitHub size={14} />
    <Link href="#">Source on GitHub</Link>
  </Row>
</Col>

Next.js Link integration

Use the tag prop to render the VaneUI Link as a Next.js Link for client-side navigation. Alias the Next.js import so it doesn't shadow Link from @vaneui/ui.

import NextLink from 'next/link';
import { Link } from '@vaneui/ui';

<Link href="/docs" tag={NextLink}>Documentation</Link>

Customizing

Set app-wide Link defaults with ThemeProvider's themeDefaults:

<ThemeProvider themeDefaults={{
  link: { info: true, noUnderline: true },
}}>
  <Link href="/docs">Read more</Link>
</ThemeProvider>

Link Props

Prop	Category	Default	Description
`accent`	Appearance		Accent color appearance (rose)
`danger`	Appearance		Danger color appearance (red)
`info`	Appearance		Info color appearance (cyan)
`inheritAppearance`	Appearance		Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
`primary`	Appearance		Primary color appearance (gray)
`secondary`	Appearance		Secondary color appearance (gray)
`success`	Appearance		Success color appearance (green)
`tertiary`	Appearance		Tertiary color appearance
`warning`	Appearance		Warning color appearance (amber)
`fontHeading`	Font Family		Heading font family (defaults to sans, customizable via --font-heading) — emits font-heading
`fontMono`	Font Family		Monospace font family — emits font-mono
`fontSans`	Font Family	✓	Sans-serif font family (default) — emits font-sans
`fontSerif`	Font Family		Serif font family — emits font-serif
`italic`	Font Style		Italic font style
`notItalic`	Font Style		Not italic (normal) font style
`fontBlack`	Font Weight		Black font weight (900) — emits font-black
`fontBold`	Font Weight		Bold font weight (700) — emits font-bold
`fontExtrabold`	Font Weight		Extra bold font weight (800) — emits font-extrabold
`fontExtralight`	Font Weight		Extra light font weight (200) — emits font-extralight
`fontLight`	Font Weight		Light font weight (300) — emits font-light
`fontMedium`	Font Weight		Medium font weight (500) — emits font-medium
`fontNormal`	Font Weight		Normal font weight (400) — emits font-normal
`fontSemibold`	Font Weight		Semibold font weight (600) — emits font-semibold
`fontThin`	Font Weight		Thin font weight (100) — emits font-thin
`inheritColor`	Inherit Color		Inherit text color from parent via CSS variable cascade (suppresses data-appearance emission)
`noInheritColor`	Inherit Color		Keep own text color; do not inherit from parent
`inheritSize`	Inherit Size	✓	Inherit font-size and line-height from the nearest parent typography element
`noInheritSize`	Inherit Size		Keep own font-size; do not inherit from parent
`trackingNormal`	Letter Spacing		Normal letter spacing (0)
`trackingTight`	Letter Spacing		Tight letter spacing (-0.025em)
`trackingTighter`	Letter Spacing		Tighter letter spacing (-0.05em)
`trackingWide`	Letter Spacing		Wide letter spacing (0.025em)
`trackingWider`	Letter Spacing		Wider letter spacing (0.05em)
`trackingWidest`	Letter Spacing		Widest letter spacing (0.1em)
`margin`	Margin		Enable margin on all sides
`marginB`	Margin		Enable only bottom margin
`marginT`	Margin		Enable only top margin
`marginX`	Margin		Enable only horizontal (inline) margin
`marginY`	Margin		Enable only vertical (block) margin
`noMargin`	Margin		Disable margin (reset to 0)
`lg`	Size		Large size
`md`	Size	✓	Medium size (default)
`sm`	Size		Small size
`xl`	Size		Extra large size
`xs`	Size		Extra small size
`textCenter`	Text Align		Align text to center
`textEnd`	Text Align		Align text to the reading-direction end (right in LTR, left in RTL)
`textJustify`	Text Align		Justify text
`textLeft`	Text Align		Align text to left (physical side, does not flip under RTL)
`textRight`	Text Align		Align text to right (physical side, does not flip under RTL)
`textStart`	Text Align		Align text to the reading-direction start (left in LTR, right in RTL)
`lineThrough`	Text Decoration		Add strikethrough/line-through decoration across text
`noUnderline`	Text Decoration		Remove ALL text-decoration — underline, line-through, and overline (text-decoration: none)
`overline`	Text Decoration		Add overline decoration above text
`underline`	Text Decoration	✓	Add underline decoration below text
`capitalize`	Text Transform		Capitalize first letter of each word
`lowercase`	Text Transform		Transform text to lowercase
`normalCase`	Text Transform		Normal text case (no transformation)
`uppercase`	Text Transform		Transform text to uppercase
`lineClamp2`	Truncate		Truncate at 2 lines with ellipsis
`lineClamp3`	Truncate		Truncate at 3 lines with ellipsis
`lineClamp4`	Truncate		Truncate at 4 lines with ellipsis
`lineClamp5`	Truncate		Truncate at 5 lines with ellipsis
`noTruncate`	Truncate		Remove truncation
`truncate`	Truncate		Single line truncation with ellipsis
`filled`	Variant		Filled variant - solid background with contrasting text color
`ghost`	Variant		Ghost variant - transparent background, no border, appearance-colored text, tinted hover background
`outline`	Variant		Outline variant - transparent background with border and colored text (default)
`breakAll`	Word Break		Break between any two characters - word-break: break-all
`breakKeep`	Word Break		Do not break CJK text - word-break: keep-all
`breakNormal`	Word Break		Reset breaking - overflow-wrap and word-break normal
`breakWords`	Word Break		Break long words to prevent overflow - overflow-wrap: break-word

Layout & utility props (gap, padding, hide, items, justify, ...) — documented on Common Props

Prop	Category	Default	Description
`cursorDefault`	Cursor		Default cursor - standard arrow
`cursorMove`	Cursor		Move cursor - indicates draggable element
`cursorNone`	Cursor		No cursor - hides the cursor
`cursorNotAllowed`	Cursor		Not-allowed cursor - indicates disabled state
`cursorPointer`	Cursor	✓	Pointer cursor - indicates clickable element
`cursorText`	Cursor		Text cursor - indicates selectable text
`cursorWait`	Cursor		Wait cursor - indicates loading/processing
`block`	Display		Block display - takes full width, new line
`contents`	Display		Contents display - element's box is removed, children display as if parent didn't exist
`flex`	Display		Flex display - flexbox container
`grid`	Display		Grid display - CSS grid container
`hidden`	Display		Hidden display - element is not visible
`inline`	Display		Inline display - flows with text
`inlineBlock`	Display		Inline-block display - inline but with block properties
`inlineFlex`	Display		Inline-flex display - inline flexbox container
`inlineGrid`	Display		Inline-grid display - inline grid container
`table`	Display		Table display - behaves like table element
`tableCell`	Display		Table-cell display - behaves like td element
`focusVisible`	Focus Visible	✓	Enable focus-visible outline
`noFocusVisible`	Focus Visible		Disable focus-visible outline
`hAuto`	Height		Set height to auto
`hFit`	Height		Set height to fit-content
`hFull`	Height		Set height to 100%
`hScreen`	Height		Set height to 100vh (viewport height), removes max-height constraint
`desktopHide`	Hide		Hide element on desktop devices and below (max-desktop: 80rem)
`mobileHide`	Hide		Hide element on mobile devices and below (max-mobile: 48rem)
`tabletHide`	Hide		Hide element on tablet devices and below (max-tablet: 64rem)
`itemsBaseline`	Items		Align items to baseline
`itemsCenter`	Items		Align items to center
`itemsEnd`	Items		Align items to end (bottom/right)
`itemsStart`	Items		Align items to start (top/left)
`itemsStretch`	Items		Stretch items to fill container
`justifyAround`	Justify		Distribute items with space around them
`justifyBaseline`	Justify		Align items along their baseline on main axis
`justifyBetween`	Justify		Distribute items with space between them
`justifyCenter`	Justify		Center items along the main axis
`justifyEnd`	Justify		Pack items toward the end of the main axis
`justifyEvenly`	Justify		Distribute items with equal space around them
`justifyStart`	Justify		Pack items toward the start of the main axis
`justifyStretch`	Justify		Stretch items to fill the main axis
`overflowAuto`	Overflow		Auto overflow - show scrollbars if needed
`overflowClip`	Overflow		Clip overflow - hard clip without scrollbars
`overflowHidden`	Overflow		Hidden overflow - clip content without scrollbars
`overflowScroll`	Overflow		Scroll overflow - always show scrollbars
`overflowVisible`	Overflow		Visible overflow - content extends beyond bounds
`overflowXAuto`	Overflow		Auto overflow on X-axis only
`overflowXClip`	Overflow		Clip overflow on X-axis only
`overflowXHidden`	Overflow		Hidden overflow on X-axis only
`overflowXScroll`	Overflow		Scroll overflow on X-axis only
`overflowXVisible`	Overflow		Visible overflow on X-axis only
`overflowYAuto`	Overflow		Auto overflow on Y-axis only
`overflowYClip`	Overflow		Clip overflow on Y-axis only
`overflowYHidden`	Overflow		Hidden overflow on Y-axis only
`overflowYScroll`	Overflow		Scroll overflow on Y-axis only
`overflowYVisible`	Overflow		Visible overflow on Y-axis only
`absolute`	Position		Absolute positioning
`fixed`	Position		Fixed positioning
`relative`	Position		Relative positioning
`static`	Position		Static positioning
`sticky`	Position		Sticky positioning
`responsiveSizing`	Responsive Sizing		Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap
`whitespaceBreakSpaces`	Whitespace		Preserve whitespace incl. trailing spaces, wrap text (white-space: break-spaces)
`whitespaceNormal`	Whitespace		Normal wrapping - default browser behavior
`whitespaceNowrap`	Whitespace		No wrap - text stays on single line
`whitespacePre`	Whitespace		Preserve whitespace and line breaks
`whitespacePreLine`	Whitespace		Preserve line breaks, collapse spaces, wrap text
`whitespacePreWrap`	Whitespace		Preserve whitespace, wrap text
`wAuto`	Width		Set width to auto
`wFit`	Width	✓	Set width to fit-content
`wFull`	Width		Set width to 100%
`wScreen`	Width		Set width to 100vw (viewport width), removes max-width constraint