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 Somewhere
HTML
JSX
<a class="link">Go to Somewhere</a>

Colors 

Multiple colors are available for Link.

Go to Somewhere Go to Somewhere Go to Somewhere Go to Somewhere Go to Somewhere Go to Somewhere
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.

Go to Somewhere Go to Somewhere Go to Somewhere Go to Somewhere Go to Somewhere Go to Somewhere
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.

Go to Somewhere Go to Somewhere Go to Somewhere Go to Somewhere Go to Somewhere Go to Somewhere
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.

Go to Somewhere Go to Somewhere Go to Somewhere Go to Somewhere Go to Somewhere Go to Somewhere
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 

classDescription
linkLink base class
link-primaryLink with primary color
link-secondaryLink with secondary color
link-successLink with success color
link-errorLink with error color
link-warningLink with warning color
link-ghostLink with bg-gray-300 on hover
link-ghost-primaryLink with bg-primary on hover
link-ghost-secondaryLink with bg-secondary on hover
link-ghost-successLink with bg-success on hover
link-ghost-errorLink with bg-error on hover
link-ghost-warningLink with bg-warning on hover
link-underlineLink with underline
link-underline-hoverLink with underline on hover
InputModal
Edit this page on GitHub