Navigational element, presented on its own or inline with a text.

Component Status

Design Kit: NOT RELEASED

Bobwai component: bobwai--link RELEASED

Content Overview

Usage

Link is a text that navigates users to another website or another page.

For an action that results in a change use a button instead of a link.

Typical Usage

Navigating between pages in the application.
Navigating to a section within a page.
Navigating to pages outside the application.

Use links for navigation to another website or another page.
Use icon "Open in the new tab" for an external link.
Use underline for hover.

Do not use link for triggering an action. Use button instead if possible.
Do not use (blue) link color for ordinary text.
Do not use e.g. "click here to Download Firefox", rather use a descriptive link e.g. Download Firefox.

Anatomy

Types

Internal

An internal link directs users to a page inside Quadient applications or anchors users to a specific section on the same page.

External

An external link contains "Open in the new tab" icon and directs users to a page outside Quadient applications.

Behavior

States

Default

Hover

Focused

Keyboard Interactions

Keys	Interactions
Enter ↵	Executes the link and moves the focus to the link target.

Editorial

List items - Use sentence case.

Related Components

Button: bobwai--button

Used In	Type	px	Token
Text color	Color		ocean-blue-500
Icon color	Color		ocean-blue-500
Icon size	Size		sizing-icon-200
Focus
Focus border color	Color		color-focus-300
Focus border width	Width	1	border-width-100
Focus inner spacing	Spacing	2	spacing-100

Accessibility

Provide labels and instructions that are clear and concise.
If the text input is a required field include the aria-required property and indicate that it is a required field and use the validation message for input errors.
W3C Web Tutorial: Labeling Controls
W3C Web Tutorial: Form Instructions

Inspire Design System : Link