Link
Classes Information
| Class | Description |
|---|---|
| link | Link base class |
| link-primary | Link with primary color |
| link-secondary | Link with secondary color |
| link-success | Link with success color |
| link-error | Link with error color |
| link-warning | Link with warning color |
| link-ghost | Link with bg-gray-4 on hover |
| link-ghost-primary | Link with bg-primary on hover |
| link-ghost-secondary | Link with bg-secondary on hover |
| link-ghost-success | Link with bg-success on hover |
| link-ghost-error | Link with bg-error on hover |
| link-ghost-warning | Link with bg-warning on hover |
| link-underline | Link with underline |
| link-underline-hover | Link with underline on hover |
Basic Usage
Example Code
html
<a class="link" href="/">Click Me</a>Colors
Example Code
html
<a class="link" href="/">Click Me</a>
<a class="link link-primary" href="/">Click Me</a>
<a class="link link-secondary" href="/">Click Me</a>
<a class="link link-success" href="/">Click Me</a>
<a class="link link-error" href="/">Click Me</a>
<a class="link link-warning" href="/">Click Me</a>Hover With Background
Example Code
html
<a class="link link-ghost" href="/">Click Me</a>
<a class="link link-primary link-ghost-primary" href="/">Click Me</a>
<a class="link link-secondary link-ghost-secondary" href="/">Click Me</a>
<a class="link link-success link-ghost-success" href="/">Click Me</a>
<a class="link link-error link-ghost-error" href="/">Click Me</a>
<a class="link link-warning link-ghost-warning" href="/">Click Me</a>Underline
Example Code
html
<a class="link link-underline" href="/">Click Me</a>
<a class="link link-primary link-underline" href="/">Click Me</a>
<a class="link link-secondary link-underline" href="/">Click Me</a>
<a class="link link-success link-underline" href="/">Click Me</a>
<a class="link link-error link-underline" href="/">Click Me</a>
<a class="link link-warning link-underline" href="/">Click Me</a>Underline With Hover
Example Code
html
<a class="link link-underline-hover" href="/">Click Me</a>
<a class="link link-primary link-underline-hover" href="/">Click Me</a>
<a class="link link-secondary link-underline-hover" href="/">Click Me</a>
<a class="link link-success link-underline-hover" href="/">Click Me</a>
<a class="link link-error link-underline-hover" href="/">Click Me</a>
<a class="link link-warning link-underline-hover" href="/">Click Me</a>