Link

Import

import { Link } from '@envsemble/envui';

Usage

Link is a native <a> with its href, rendered through the link component of LinkProvider, so the application's router handles it, as Connect your router describes.

Its children are the label.
disabled removes the destination: the link can't be focused or followed, and reports aria-disabled.

InRunningText.tsx

import { Link, Text } from '@envsemble/envui';

export default function InRunningText() {
  return (
    <Text>
      Read the <Link href="/guide">project guide</Link> for details.
    </Text>
  );
}

Without the underline

underline is true by default; underline={false} leaves it off, in a list of destinations whose context marks them, as the WithoutUnderline example does.

<Link href="/settings/profile" underline={false}>
  Profile
</Link>

Looks like a button

A Button with href is the same native link, through the same LinkProvider, in a button's shape.

<Button href="/projects/new">New project</Button>

Customize

Link is a text Button with the class env-link, whose data-underline says whether it is underlined; CSS may target both. It takes the text button's colors. At rest its underline is a lighter line of its color; under the pointer and while pressed the underline takes the full color and the label darkens a step, then another.

Accessibility

You provide

Link text that names the destination.
The router link through LinkProvider, as setup describes.

envUI provides

A native <a>, so modifier and middle clicks behave as the browser's.
An underline by default, so color isn't the only cue.
The shared focus ring, and aria-disabled while disabled.

Props

A destination inside running text, underlined by default. It is a native link, through the LinkProvider's link component, in the text button's colors.

Prop	Type	Description
`href`required	`string`	The destination: the element is a native link, through the LinkProvider's link component.
`disabled`	`boolean`	A disabled button cannot be pressed; a disabled link has no destination, cannot be focused or followed, and reports aria-disabled.
`underline`Default `true`	`boolean`	Underline the link; true by default, so it stands out from the text around it.

Also accepts the native props of <a>, such as ref, className and aria-* attributes.

Part names

Each part's class and state attributes are public and versioned, for an application's CSS to style.

env-link: The link.
data-underline: Any value, or present
data-variant: text

Changelog

1.0.0: Link has a page of its own, split from the button page.
1.0.0-prerelease.6: An underlined link rests on a lighter line, its color at 40 %, and draws the underline in its full color under the pointer and while pressed, so rest, hover and press read apart.