Box Link

A link styled as a full width bordered container, much like a Box Button.

Link
Link
State Default

Box Link

Desktop Components library

MozBoxLink

Storybook

Usage

Do

Use for opening a new page (website or about: page) from an existing flow.

Do

Use within settings like UI that’s contained in a card, sidebar, drawer, or anything with a predetermined small width (anything below 600px).

Do

Use for settings configurations that may involve opening a new flow for further customization.

Design properties

Property Values Default
Show icon Boolean true | false true
Show description Boolean true | false true
State Variant Default | Hover | Active | Focus Default

Show description

Adds a smaller, and de-emphasized description below the label.

Show icon

An optional icon ahead of the label.

Code properties and attributes

See Storybook arguments table

Variants

State

Link
Link
State Active
Link
Link
State Default
Link
Link
State Focus
Link
Link
State Hover

Related components

Box Button

A full width bordered button for navigating into a new flow.

Box Group

A full width bordered container for neatly grouping related Box components together.

Box Item

A full width bordered container.

Changelog

Date

Version

Notes

September 2, 2025

1.0.0

First release of Box Link component documentation.

Acorn Design System ©2025 Mozilla