Link Button

An action styled as a link: brand-coloured text that underlines on hover. Use it for low-emphasis actions and inline navigation in a sentence or card footer.

DesignReactVuePrompts

Copy

Link Label

1

2

3

4

5

6

7

8

9

import { LinkButton } from '@orvain/react';
 
// Renders <button> for in-page actions
<LinkButton label="Learn more" onClick={() => {}} />
 
// Renders a real <a href> for navigation
<LinkButton label="Read the docs" href="/docs" />
 
<LinkButton intent="brand" defaultUnderline label="View details" />

Add a neutral Orvain Link Button, labelled “Link Label”, a chevron on each side, no underline at rest.

Orvain MCPIncluded with the library

When to use#

• For tertiary actions such as Learn more, View all or Forgot password?
• Inside text or a dense card footer, where a boxed button is too heavy.

When not to use

• Use a Button for the main action on a screen.

Anatomy#

States#

Source#

Preview – final code pending

The Link Button is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is publishedGet notified when the source is published