Link

A link widget provides an interactive reference to a resource, which can be external or within the current page or application. It is a versatile component that can be used in various contexts, such as navigation menus, breadcrumbs, and inline text links.

Code Editor

Features

Supports different variants

Can contain text, or text with an icon

Supports disabled state

Accepts custom attributes and className

Assigns the correct HTML tag

Reference Links

ARIA design pattern

Anatomy

Import all parts and combine them together.

import { Link } from '@umrel/umrel';
import type { LinkProps } from '@umrel/umrel';

  <Link href='https://umrel.com' attributes={{ target: '_blank' }}>
        Umrel
</Link>

Variant

Link component has two variants:

underline

and

plain

. The

underline

variant is the default style for links, and it adds an underline to the text. The

plain

variant removes the underline from the text.

Code Editor

Color

The color of the link can be customized using the

color

property. The

color

property accepts the following values: props table.

Code Editor

Icon

Icon can be added to the link using the

icon

property.

Code Editor

State

Link has

disabled

state that can be used to prevent users from clicking on the link.

Code Editor

Accessibility

Link follows the WAI-ARIA Link design pattern to ensure that it is accessible to all users.

Keyboard Interactions

Key	Description
Enter Space	Executes the link and moves focus to the link target