Link

Link is mainly used as navigational element and usually appear within or directly following a paragraph or sentence.

Import#

import { Link } from '@volue/wave-react';

Examples#

Basic#

Use Link when you want users to navigate to a different page within the application or jump to an existing element on the same page. Links usually appear within or directly following a sentence.

Use a Button component instead of a link for actions that will change data or manipulate how it is displayed, change a state, or trigger an action. Buttons perform an action, like submitting a form or closing a modal; Links take you somewhere, like to the documentation page.

External link#

When you link to an entirely different site which is placed outside the current host, mark it with isExternal flag.

The rel and target will automatically be updated to rel=”noreferrer noopener” target="_blank" (link will open a new tab) and an external icon will be shown.

Disabled link#

Link with content#

By default, links are styled with color cue and an underline, but sometimes you may want to wrap certain elements with Link to provide navigational semantics without impacting their appearance. Use bare prop to remove the default styling.

API Reference#

Prop	Type	Default
`as`	`enum`	`a`
`css`	`StitchesCss`	No default value
`href`	`string`	No default value
`isExternal`	`boolean`	`false`
`isDisabled`	`boolean`	`false`
`bare`	`boolean`	`false`