Skip to main contentCarbon Design System

Link

Color

ClassPropertyColor token
.bx--linkcolor$link-01
Examples of link and inline link

Interactive states

ClassPropertyColor token
:hovertext color$hover-primary-text
:activetext color$text-01
:focusoutline$focus
:visitedtext color$visited-link
:disabledtext color$disabled-02
Examples of link and inline link states

Typography

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

PropertyFont-size (px/rem)Font-weightText style
.bx--link14 / 0.875Regular / 400$body-short-01
.bx--link--sm12 / 0.75Regular / 400$helper-text-01
.bx--link--lg16 / 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.

ClassPropertypx / remSpacing token
.bx--linkpadding-right16 / 1$spacing-05
.bx--linkpadding-bottom4 / 0.25$spacing-02
.bx--linkpadding-bottom8 / 0.5$spacing-03
Link structure and spacing measurements

Structure and spacing measurements for Link | px / rem