Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Link

Color

ClassPropertyColor token
.bx--linkcolor$link-01

Interactive states

ClassPropertyColor token
:hovertext color$hover-primary-text
:activetext color$text-01
:focusborder$focus
:visitedtext color$visited-link
:disabledtext color$disabled-02
Example of enabled, hover, and disabled link states

Normal, hover, disabled link states

Typography

Links should not exceed three words.

PropertyFont-size (px/rem)Font-weightText style
.bx--link14 / 0.875Regular / 400$body-short-01

Structure

Links can be grouped horizontally or vertically and must be underlined. 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
Link structure and spacing measurements

Structure and spacing measurements for Link | px / rem