Skip to main contentCarbon Design System

Link

Color

ElementPropertyColor token
Linktext-color$link-primary
Examples of link and inline link

Interactive states

StatePropertyColor token
Hovertext-color$link-primary-hover
Activetext-color$text-primary
Focusborder$focus
Visitedtext-color$link-visited
Disabledtext-color$text-disabled
Examples of link and inline link states

Typography

There are three size variants for the link component: small, medium, and large.

PropertyFont-size (px / rem)Font-weightType token
Small12 / 0.75Regular / 400$text-helper
Medium14 / 0.875Regular / 400$body-short-01
Large16 / 1Regular / 400$body-short-02
Examples of link sizes

Structure

Links can be grouped horizontally or vertically. The following specs are not built into the link component but are recommended by design as the proper distance between grouped links.

ElementPropertypx / remSpacing token
Linkpadding-right16 / 1$spacing-05
padding-bottom4 / 0.25$spacing-02
padding-bottom8 / 0.5$spacing-03
Iconpadding-left8 / 0.5$spacing-03
Link structure and spacing measurements

Structure and spacing measurements for Link | px / rem

Link with icon structure and spacing measurements

Structure and spacing measurements for Link with icon | px / rem