Link

Link utilities enable styling of anchor elements with options for color, opacity, underline offset, underline color, and more.

Class Name Type Description
link Component Link component
link-primary Color Primary color
link-secondary Color Secondary color
link-info Color Info color
link-success Color Success color
link-warning Color Warning color
link-danger Color Danger color
link-neutral Color Neutral color
link-hover Modifier Underline on hover

Example

Click me

HTML

<a href="#" class="link">Click me</a>

Colors

Primary Secondary Info Success Warning Danger Neutral

HTML

<a href="#" class="link link-primary">Primary</a>
<a href="#" class="link link-secondary">Secondary</a>
<a href="#" class="link link-info">Info</a>
<a href="#" class="link link-success">Success</a>
<a href="#" class="link link-warning">Warning</a>
<a href="#" class="link link-danger">Danger</a>
<a href="#" class="link link-neutral">Neutral</a>
Default Primary Secondary Info Success Warning Danger Neutral

HTML

<a href="#" class="link link-hover">Default</a>
<a href="#" class="link link-hover link-primary">Primary</a>
<a href="#" class="link link-hover link-secondary">Secondary</a>
<a href="#" class="link link-hover link-info">Info</a>
<a href="#" class="link link-hover link-success">Success</a>
<a href="#" class="link link-hover link-warning">Warning</a>
<a href="#" class="link link-hover link-danger">Danger</a>
<a href="#" class="link link-hover link-neutral">Neutral</a>

CSS variables

The link component is built using a set of CSS variables. These variables provide flexibility for customizing styles.

.link {
  --link-color: var(--text-color-default);
  --link-hover-color: var(--text-color-default);
  --link-active-color: var(--link-hover-color);
}