Link
Ripple UI comes with a Link component that is used to navigate to another page or to open a link in a new tab.
Default
Simple example of Link.
Go to SomewhereHTML
JSX
<a class="link">Go to Somewhere</a>
Colors
Multiple colors are available for Link.
HTML
JSX
<a class="link">Go to Somewhere</a><a class="link link-primary">Go to Somewhere</a><a class="link link-secondary">Go to Somewhere</a><a class="link link-success">Go to Somewhere</a><a class="link link-error">Go to Somewhere</a><a class="link link-warning">Go to Somewhere</a>
Ghost
Links with background color on hover.
HTML
JSX
<a class="link link-ghost">Go to Somewhere</a><a class="link link-primary link-ghost-primary">Go to Somewhere</a><a class="link link-secondary link-ghost-secondary">Go to Somewhere</a><a class="link link-success link-ghost-success">Go to Somewhere</a><a class="link link-error link-ghost-error">Go to Somewhere</a><a class="link link-warning link-ghost-warning">Go to Somewhere</a>
Underline
Links with underline.
HTML
JSX
<a class="link link-underline">Go to Somewhere</a><a class="link link-primary link-underline">Go to Somewhere</a><a class="link link-secondary link-underline">Go to Somewhere</a><a class="link link-success link-underline">Go to Somewhere</a><a class="link link-error link-underline">Go to Somewhere</a><a class="link link-warning link-underline">Go to Somewhere</a>
Underline on hover.
Links with underline on hover.
HTML
JSX
<a class="link link-underline-hover">Go to Somewhere</a><a class="link link-primary link-underline-hover">Go to Somewhere</a><a class="link link-secondary link-underline-hover">Go to Somewhere</a><a class="link link-success link-underline-hover">Go to Somewhere</a><a class="link link-error link-underline-hover">Go to Somewhere</a><a class="link link-warning link-underline-hover">Go to Somewhere</a>
API
| 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-300 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 |