Skip to main contentCarbon Design System



ClassPropertyColor token
Examples of link and inline link

Interactive states

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


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


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