ActionLink

Dark Mode
Accessibility

Action links are actions that are primarily used for hyperlinks or inline actions.

View Implementation

Anatomy

tbd.

Actions

Type	Support	Description
Synchronous		An action that is executed locally and immediately.
Hyperlink		A hyperlink that navigates to a different route.
Ansynchronous		An action that is triggered immediately, but takes an unknown amount of time to complete.

Intents

Primary

Dark Mode
Open in Playroom

Primary Alternate

Dark Mode
Open in Playroom

Control

Dark Mode
Open in Playroom

Behaviour

Keyboard Focus
An action link can be navigated using a keyboard. The keyboard focus state adds a blue ring around the label. It only shows when a user is actually using the keyboard to navigate.
Typograhpic Inheritance
Links inherit the typography styles of their surrounding text, so we can use them with any of our text variants.

Usage Guidelines

tbd.

Keyboard Interaction

Key	Interaction
`Enter`	Execute the action or open the linked page. In case of an action, the focus remains on the link unless it opens or closes a container. In this case, the focus moves to the target or back to the caller.

Options

Name	Type	Default	Description
disabled	bool		Whether the link is disabled.
extend	object		The extend style.
href	string, object		The href that the link points to.
intent	primary \| primary-alternate \| control	primary
onClick	func		The onClick event handler
target	_self \| _blank		Allow to open in new window

Configuration

If you're working with Next.js, make sure to add the

linkComponent

configuration option.

Changelog

11. November 2022

renamed Link to ActionLink
renamed the
```
cta
```
intent to
```
primary
```
to match the action buttons
renamed the
```
inline
```
intent to
```
control
```
to match the action buttons
added the
```
primary-alternative
```
intent