Link
Link utilities enable styling of anchor elements with options for color, opacity, underline offset, underline color, and more.
Example
HTML
<a href="#" class="link">Click me</a>Colors
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>Link hover
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>Class Overview
A list of all available utility classes for the link component.
| 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 |
CSS variables
The link component is built using a set of CSS variables. These variables provide flexibility for customizing styles. See the Theming to customize styles globally and apply overrides as needed.
.link {
--link-color: var(--text-color-default);
--link-hover-color: var(--text-color-default);
--link-active-color: var(--link-hover-color);
}