Build / Atoms

Link

atom
play-fn

A navigational anchor.

Framework-agnostic by design: it renders a plain <a>. To use a router, pass its link component's props through, or wrap this in your app.

import { Link } from '@meetcard/deck'

Example

<Link href="/deck">Back to your deck</Link> <Link href="https://meetcard.com" external>meetcard.com</Link>

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

Default

Source

const Default = () => <Link href="#">Back to your deck</Link>;

Every tone. default for navigation, muted for secondary routes, brand sparingly.

Tones

Source

const Tones = () => <Stack gap={8}>
    <Link href="#" tone="brand">brand
              </Link>
    <Link href="#" tone="default">default
              </Link>
    <Link href="#" tone="muted">muted
              </Link>
</Stack>;

always is clearer for standalone links; hover keeps prose calm.

Underline

Source

const Underline = () => <Stack gap={8}>
    <Link href="#" underline="hover">underline on hover
              </Link>
    <Link href="#" underline="always">always underlined
              </Link>
</Stack>;

Inside a sentence, where it keeps its underline so it reads as a link without colour.

In Prose

Source

const InProse = () => <Text style={{ maxWidth: 420 }}>Every connection you make is saved to your deck. You can{' '}
    <Link href="#">review them</Link>{' '}at any time.
        </Text>;

External links get safe rel, open in a new tab, and append a visually hidden note so the behaviour is announced rather than merely implied.

External

Source

const External = () => <Link href="https://example.com" external>meetcard.com</Link>;

Props

Prop	Type	Default	Description
`external`	`boolean`	`false`	Opens in a new tab with safe `rel`, and appends a visually hidden "(opens in a new tab)" so the behaviour is announced, not just implied.
`tone`	`'brand' \| 'default' \| 'muted' \| 'inverse'`	`'brand'`	—
`underline`	`'always' \| 'hover'`	`'always'`	`always` (the default) is the accessible choice inside prose: a link distinguished from surrounding text by color alone needs 3:1 against that text, which brand colors rarely clear. Only use `hover` where the link is NOT inside a block of text — a card title, a nav item, a standalone action — so its role is obvious from position rather than color.

Also accepts everything from AnchorHTMLAttributes, so id, data-* and event handlers pass straight through.