Nav Button Link

A link (<a>) for navigation bar

import '@wevisdemo/ui/styles/nav-button-link.css';
import WvNavButtonLink from '@wevisdemo/ui/{react,vue,svelte}/nav-button-link';

<WvNavButtonLink href="https://github.com/wevisdemo/design-systems">
  GitHub
</WvNavButtonLink>

Props

Name	Type	Default
href	string
target	string	'_blank'
rel	string	'nofollow noopener noreferrer'
dark	boolean	false

Slot / Children

Button content

Examples

With dark theme

<WvNavButtonLink href="https://github.com/wevisdemo/design-systems" dark>
  GitHub
</WvNavButtonLink>

Internal link

Normally, the button link has a default props for target and rel suitable for making an external link. You can set them both to undefined to make an internal link.

<WvNavButtonLink href="https://wevis.info/" target={undefined} rel={undefined}>
  WeVis
</WvNavButtonLink>