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.

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#

`Link Classes`

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

Input Modal

Edit this page on GitHub