Link

A link: burnt sienna in prose, quiet ink in rows, muted for chrome.

orders Marmot documentation Members orders

<mm-link href="/discover/mrn://postgresql/table/shop.public.orders">orders</mm-link>
<mm-link href="https://marmotdata.io/docs" external>Marmot documentation</mm-link>
<mm-link href="/settings/members" muted>Members</mm-link>
<mm-link href="/discover/mrn://postgresql/table/shop.public.orders" quiet>orders</mm-link>

Guidance

Links take the reader somewhere: another asset, a run, the documentation. In running prose they are burnt sienna with a 1px underline that thickens to 2px on hover. In lists, tables, rows and cards use quiet: ink with no underline until hover or focus, so burnt sienna is left for the primary button, the current tab and real links in text. Chrome links in toolbars and footers use muted (ink-2). External links open in a new tab, carry an open-in-new icon and say so to screen readers, in every variant. Focus shows the ink ring, never burnt sienna.

Follows the WAI-ARIA link pattern: https://www.w3.org/WAI/ARIA/apg/patterns/link/

Properties

Property	Attribute	Type	Default	Description
href	href	string	''	Destination URL.
external	external	boolean	false	Opens in a new tab with rel="noopener noreferrer", shows an open-in-new icon and announces it.
muted	muted	boolean	false	Ink-2 for chrome links (footers, toolbars, breadcrumbs) instead of burnt sienna.
quiet	quiet	boolean	false	Ink with no underline until hover or focus, for links in lists, tables, rows and cards. Prose links stay burnt sienna.
download	download	string | undefined		Suggests a file name and downloads the target.
current	current	'page' | 'step' | 'location' | undefined		Marks the link as the current page, for example in a breadcrumb trail.

Slots

Slot	Description
Default	The link text.

CSS parts

Part	Description
link	The native anchor.
icon	The open-in-new icon on external links.

Examples

Every state of mm-link in Storybook, with keyboard and screen reader tests.