Hire UsGet CoreUI PRO all-access →

React Link Utilities

Link

MarkdownChatGPTClaude

Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.

ClassStyles
.link-10color: color-mix(in oklch, var(--cui-link-color) 10%, transparent);
.link-20color: color-mix(in oklch, var(--cui-link-color) 20%, transparent);
.link-30color: color-mix(in oklch, var(--cui-link-color) 30%, transparent);
.link-40color: color-mix(in oklch, var(--cui-link-color) 40%, transparent);
.link-50color: color-mix(in oklch, var(--cui-link-color) 50%, transparent);
.link-60color: color-mix(in oklch, var(--cui-link-color) 60%, transparent);
.link-70color: color-mix(in oklch, var(--cui-link-color) 70%, transparent);
.link-80color: color-mix(in oklch, var(--cui-link-color) 80%, transparent);
.link-90color: color-mix(in oklch, var(--cui-link-color) 90%, transparent);
.link-100color: var(--cui-link-color);
.link-opacity-10color: color-mix(in oklch, var(--cui-link-color) 10%, transparent);
.link-opacity-25color: color-mix(in oklch, var(--cui-link-color) 25%, transparent);
.link-opacity-50color: color-mix(in oklch, var(--cui-link-color) 50%, transparent);
.link-opacity-75color: color-mix(in oklch, var(--cui-link-color) 75%, transparent);
.link-opacity-100color: var(--cui-link-color);
.underline-offset-1text-underline-offset: 0.125em;
.underline-offset-2text-underline-offset: 0.25em;
.underline-offset-3text-underline-offset: 0.375em;
.underline-thickness-1text-decoration-thickness: 1px;
.underline-thickness-2text-decoration-thickness: 2px;
.underline-thickness-3text-decoration-thickness: 3px;
.underline-thickness-4text-decoration-thickness: 4px;
.underline-thickness-5text-decoration-thickness: 5px;
.underline-primary--cui-underline: var(--cui-primary-fg);
text-decoration-color: var(--cui-underline);
.underline-secondary--cui-underline: var(--cui-secondary-fg);
text-decoration-color: var(--cui-underline);
.underline-success--cui-underline: var(--cui-success-fg);
text-decoration-color: var(--cui-underline);
.underline-info--cui-underline: var(--cui-info-fg);
text-decoration-color: var(--cui-underline);
.underline-warning--cui-underline: var(--cui-warning-fg);
text-decoration-color: var(--cui-underline);
.underline-danger--cui-underline: var(--cui-danger-fg);
text-decoration-color: var(--cui-underline);
.underline-inverse--cui-underline: var(--cui-inverse-fg);
text-decoration-color: var(--cui-underline);
.underline--cui-underline: currentcolor;
text-decoration-color: var(--cui-underline);
.underline-10text-decoration-color: color-mix(in oklch, var(--cui-underline, currentcolor) 10%, transparent);
.underline-20text-decoration-color: color-mix(in oklch, var(--cui-underline, currentcolor) 20%, transparent);
.underline-30text-decoration-color: color-mix(in oklch, var(--cui-underline, currentcolor) 30%, transparent);
.underline-40text-decoration-color: color-mix(in oklch, var(--cui-underline, currentcolor) 40%, transparent);
.underline-50text-decoration-color: color-mix(in oklch, var(--cui-underline, currentcolor) 50%, transparent);
.underline-60text-decoration-color: color-mix(in oklch, var(--cui-underline, currentcolor) 60%, transparent);
.underline-70text-decoration-color: color-mix(in oklch, var(--cui-underline, currentcolor) 70%, transparent);
.underline-80text-decoration-color: color-mix(in oklch, var(--cui-underline, currentcolor) 80%, transparent);
.underline-90text-decoration-color: color-mix(in oklch, var(--cui-underline, currentcolor) 90%, transparent);
.underline-100text-decoration-color: var(--cui-underline, currentcolor);
.underline-opacity-0text-decoration-color: color-mix(in oklch, var(--cui-underline, currentcolor) 0%, transparent);
.underline-opacity-10text-decoration-color: color-mix(in oklch, var(--cui-underline, currentcolor) 10%, transparent);
.underline-opacity-25text-decoration-color: color-mix(in oklch, var(--cui-underline, currentcolor) 25%, transparent);
.underline-opacity-50text-decoration-color: color-mix(in oklch, var(--cui-underline, currentcolor) 50%, transparent);
.underline-opacity-75text-decoration-color: color-mix(in oklch, var(--cui-underline, currentcolor) 75%, transparent);
.underline-opacity-100text-decoration-color: var(--cui-underline, currentcolor);
On this page

Change the alpha opacity of the link colour with .link-{percentage} utilities — color-mix() fades --cui-link-color towards transparent. Please be aware that changes to a color’s opacity can lead to links with insufficient contrast.

Link opacity 10

Link opacity 20

Link opacity 30

Link opacity 40

Link opacity 50

Link opacity 60

Link opacity 70

Link opacity 80

Link opacity 90

Link opacity 100

<p><a className="link-10" href="#">Link opacity 10</a></p>
<p><a className="link-20" href="#">Link opacity 20</a></p>
<p><a className="link-30" href="#">Link opacity 30</a></p>
<p><a className="link-40" href="#">Link opacity 40</a></p>
<p><a className="link-50" href="#">Link opacity 50</a></p>
<p><a className="link-60" href="#">Link opacity 60</a></p>
<p><a className="link-70" href="#">Link opacity 70</a></p>
<p><a className="link-80" href="#">Link opacity 80</a></p>
<p><a className="link-90" href="#">Link opacity 90</a></p>
<p><a className="link-100" href="#">Link opacity 100</a></p>
<p><a className="link-10" href="#">Link opacity 10</a></p>
<p><a className="link-20" href="#">Link opacity 20</a></p>
<p><a className="link-30" href="#">Link opacity 30</a></p>
<p><a className="link-40" href="#">Link opacity 40</a></p>
<p><a className="link-50" href="#">Link opacity 50</a></p>
<p><a className="link-60" href="#">Link opacity 60</a></p>
<p><a className="link-70" href="#">Link opacity 70</a></p>
<p><a className="link-80" href="#">Link opacity 80</a></p>
<p><a className="link-90" href="#">Link opacity 90</a></p>
<p><a className="link-100" href="#">Link opacity 100</a></p>

You can even change the opacity level on hover.

Link hover opacity 10

Link hover opacity 20

Link hover opacity 30

Link hover opacity 40

Link hover opacity 50

Link hover opacity 60

Link hover opacity 70

Link hover opacity 80

Link hover opacity 90

Link hover opacity 100

<p><a className="link-10-hover" href="#">Link hover opacity 10</a></p>
<p><a className="link-20-hover" href="#">Link hover opacity 20</a></p>
<p><a className="link-30-hover" href="#">Link hover opacity 30</a></p>
<p><a className="link-40-hover" href="#">Link hover opacity 40</a></p>
<p><a className="link-50-hover" href="#">Link hover opacity 50</a></p>
<p><a className="link-60-hover" href="#">Link hover opacity 60</a></p>
<p><a className="link-70-hover" href="#">Link hover opacity 70</a></p>
<p><a className="link-80-hover" href="#">Link hover opacity 80</a></p>
<p><a className="link-90-hover" href="#">Link hover opacity 90</a></p>
<p><a className="link-100-hover" href="#">Link hover opacity 100</a></p>
<p><a className="link-10-hover" href="#">Link hover opacity 10</a></p>
<p><a className="link-20-hover" href="#">Link hover opacity 20</a></p>
<p><a className="link-30-hover" href="#">Link hover opacity 30</a></p>
<p><a className="link-40-hover" href="#">Link hover opacity 40</a></p>
<p><a className="link-50-hover" href="#">Link hover opacity 50</a></p>
<p><a className="link-60-hover" href="#">Link hover opacity 60</a></p>
<p><a className="link-70-hover" href="#">Link hover opacity 70</a></p>
<p><a className="link-80-hover" href="#">Link hover opacity 80</a></p>
<p><a className="link-90-hover" href="#">Link hover opacity 90</a></p>
<p><a className="link-100-hover" href="#">Link hover opacity 100</a></p>

.link-opacity-{10|25|50|75|100} and their -hover variants are the deprecated v5 spellings; they still render and are removed in v7.

Underline color

Change the underline’s color independent of the link text color.

Primary underline

Secondary underline

Success underline

Info underline

Warning underline

Danger underline

Inverse underline

<p><a href="#" className="underline-primary">Primary underline</a></p>
<p><a href="#" className="underline-secondary">Secondary underline</a></p>
<p><a href="#" className="underline-success">Success underline</a></p>
<p><a href="#" className="underline-info">Info underline</a></p>
<p><a href="#" className="underline-warning">Warning underline</a></p>
<p><a href="#" className="underline-danger">Danger underline</a></p>
<p><a href="#" className="underline-inverse">Inverse underline</a></p>
<p><a href="#" className="underline-primary">Primary underline</a></p>
<p><a href="#" className="underline-secondary">Secondary underline</a></p>
<p><a href="#" className="underline-success">Success underline</a></p>
<p><a href="#" className="underline-info">Info underline</a></p>
<p><a href="#" className="underline-warning">Warning underline</a></p>
<p><a href="#" className="underline-danger">Danger underline</a></p>
<p><a href="#" className="underline-inverse">Inverse underline</a></p>

Underline offset

Change the underline’s distance from your text. Offset is set in em units to automatically scale with the element’s current font-size.

Default link

Offset 1 link

Offset 2 link

Offset 3 link

<p><a href="#">Default link</a></p>
<p><a className="underline-offset-1" href="#">Offset 1 link</a></p>
<p><a className="underline-offset-2" href="#">Offset 2 link</a></p>
<p><a className="underline-offset-3" href="#">Offset 3 link</a></p>
<p><a href="#">Default link</a></p>
<p><a className="underline-offset-1" href="#">Offset 1 link</a></p>
<p><a className="underline-offset-2" href="#">Offset 2 link</a></p>
<p><a className="underline-offset-3" href="#">Offset 3 link</a></p>

Underline thickness

Change how heavy the underline is drawn, on links or any underlined text. Hover variants are included.

Thickness 1 link

Thickness 2 link

Thickness 3 link

Thicker on hover

<p><a className="underline-thickness-1" href="#">Thickness 1 link</a></p>
<p><a className="underline-thickness-2" href="#">Thickness 2 link</a></p>
<p><a className="underline-thickness-3" href="#">Thickness 3 link</a></p>
<p><a className="underline-thickness-1 underline-thickness-3-hover" href="#">Thicker on hover</a></p>
<p><a className="underline-thickness-1" href="#">Thickness 1 link</a></p>
<p><a className="underline-thickness-2" href="#">Thickness 2 link</a></p>
<p><a className="underline-thickness-3" href="#">Thickness 3 link</a></p>
<p><a className="underline-thickness-1 underline-thickness-3-hover" href="#">Thicker on hover</a></p>

Underline opacity

Change the underline’s opacity with .underline-{percentage}. The underline colour comes from --cui-underline, which .underline sets to currentColor and .underline-{color} to a theme colour; without either class the opacity utility fades currentColor.

Underline opacity 10

Underline opacity 30

Underline opacity 50

Underline opacity 70

Underline opacity 100

<p><a className="underline-offset-2 underline underline-10" href="#">Underline opacity 10</a></p>
<p><a className="underline-offset-2 underline underline-30" href="#">Underline opacity 30</a></p>
<p><a className="underline-offset-2 underline underline-50" href="#">Underline opacity 50</a></p>
<p><a className="underline-offset-2 underline underline-70" href="#">Underline opacity 70</a></p>
<p><a className="underline-offset-2 underline underline-100" href="#">Underline opacity 100</a></p>
<p><a className="underline-offset-2 underline underline-10" href="#">Underline opacity 10</a></p>
<p><a className="underline-offset-2 underline underline-30" href="#">Underline opacity 30</a></p>
<p><a className="underline-offset-2 underline underline-50" href="#">Underline opacity 50</a></p>
<p><a className="underline-offset-2 underline underline-70" href="#">Underline opacity 70</a></p>
<p><a className="underline-offset-2 underline underline-100" href="#">Underline opacity 100</a></p>

.underline-opacity-{0|10|25|50|75|100} are the deprecated v5 spellings; they still render and are removed in v7.

Hover variants

Just like the .link-{percentage}-hover utilities, .underline-offset and .underline-{percentage} utilities include :hover variants by default. Mix and match to create unique link styles.

Underline opacity 20, 100 on hover 
<a className="underline-offset-2 underline-offset-3-hover underline underline-20 underline-100-hover" href="#">
Underline opacity 20, 100 on hover
</a>
<a className="underline-offset-2 underline-offset-3-hover underline underline-20 underline-100-hover" href="#">
Underline opacity 20, 100 on hover
</a>

Give a link a theme colour with a .theme-* class. Reboot resolves a link’s colour from --cui-theme-fg, which every theme class sets, so the link follows the theme rather than needing a class of its own.

Primary link

Secondary link

Success link

Info link

Warning link

Danger link

Inverse link

Emphasis link

<p><a href="#" className="theme-primary underline-offset-2 underline underline-20 underline-100-hover">Primary link</a></p>
<p><a href="#" className="theme-secondary underline-offset-2 underline underline-20 underline-100-hover">Secondary link</a></p>
<p><a href="#" className="theme-success underline-offset-2 underline underline-20 underline-100-hover">Success link</a></p>
<p><a href="#" className="theme-info underline-offset-2 underline underline-20 underline-100-hover">Info link</a></p>
<p><a href="#" className="theme-warning underline-offset-2 underline underline-20 underline-100-hover">Warning link</a></p>
<p><a href="#" className="theme-danger underline-offset-2 underline underline-20 underline-100-hover">Danger link</a></p>
<p><a href="#" className="theme-inverse underline-offset-2 underline underline-20 underline-100-hover">Inverse link</a></p>

<p><a href="#" className="text-body-emphasis underline-offset-2 underline underline-30 underline-70-hover">Emphasis link</a></p>
<p><a href="#" className="theme-primary underline-offset-2 underline underline-20 underline-100-hover">Primary link</a></p>
<p><a href="#" className="theme-secondary underline-offset-2 underline underline-20 underline-100-hover">Secondary link</a></p>
<p><a href="#" className="theme-success underline-offset-2 underline underline-20 underline-100-hover">Success link</a></p>
<p><a href="#" className="theme-info underline-offset-2 underline underline-20 underline-100-hover">Info link</a></p>
<p><a href="#" className="theme-warning underline-offset-2 underline underline-20 underline-100-hover">Warning link</a></p>
<p><a href="#" className="theme-danger underline-offset-2 underline underline-20 underline-100-hover">Danger link</a></p>
<p><a href="#" className="theme-inverse underline-offset-2 underline underline-20 underline-100-hover">Inverse link</a></p>

<p><a href="#" className="text-body-emphasis underline-offset-2 underline underline-30 underline-70-hover">Emphasis link</a></p>

.underline here carries the underline colour, which defaults to currentColor — so it follows the theme too, and the .underline-{percentage} utilities have something to fade. Name a colour with .underline-{color} to break that pairing deliberately.

The theme slot is a tone picked for text, not the raw brand colour: it darkens on a light background and lightens on a dark one, which is why the same class reads on both.

Conveying meaning to assistive technologies

Relying on color to convey meaning creates a visual cue that assistive technologies, like screen readers, cannot perceive. It’s essential that any information represented by color is either apparent from the content itself (e.g., the visible text) or supplemented by alternative methods, such as extra text using the .visually-hidden class.

Customizing

In addition to the following Sass functionality, consider reading about our included CSS custom properties (aka CSS variables) for colors and more.

Utilities API

Link utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss
"link": (
  class: link,
  property: color,
  state: hover,
  values: theme-opacity-values(--cui-link-color)
),
// deprecated
"link-opacity": (
  class: link-opacity,
  property: color,
  state: hover,
  values: theme-opacity-values(--cui-link-color, null, (10: .1, 25: .25, 50: .5, 75: .75, 100: 1))
),
"underline-offset": (
  property: text-underline-offset,
  class: underline-offset,
  state: hover,
  values: (
    1: .125em,
    2: .25em,
    3: .375em,
  )
),
"underline-thickness": (
  property: text-decoration-thickness,
  class: underline-thickness,
  state: hover,
  values: (
    1: 1px,
    2: 2px,
    3: 3px,
    4: 4px,
    5: 5px,
  )
),
"underline-color": (
  property: (
    --cui-underline: null,
    text-decoration-color: var(--cui-underline),
  ),
  class: underline,
  values: map.merge(
    $utilities-links-underline,
    (
      // currentColor, so a themed link underlines in its own colour rather than
      // the global link blue. Name a colour explicitly to break that pairing.
      null: currentcolor,
    )
  )
),
"underline-opacity": (
  class: underline,
  property: text-decoration-color,
  state: hover,
  values: theme-opacity-values(--cui-underline, currentcolor)
),
// deprecated
"underline-opacity-legacy": (
  class: underline-opacity,
  property: text-decoration-color,
  state: hover,
  values: theme-opacity-values(--cui-underline, currentcolor, (0: 0, 10: .1, 25: .25, 50: .5, 75: .75, 100: 1))
),