#Link

The navigation member of the Actions family — a styled <a> that takes the reader somewhere. If activating it changes where you are it is a Link; if it does something in place it is a Button, however text-like it looks. type is semantic, so never hand-colour a link, and the hover underline is automatic. Link text has to describe its destination — “Click here” and “Learn more” read as nothing in a screen reader’s link list.

Source · Storybook

#Usage

import { Link } from '@wallarm-org/design-system/Link';

#Examples

#Types

default, alt and muted. alt is the inverted family for dark surfaces, which is why it barely reads here; the fourth type, table, is the master-cell title link and only belongs there.

#Weight

medium where the surrounding copy is heavier, or to lift a standalone link — there is no bold, so medium is as far as it goes.

#Sizes

xs to xl, each matched to a text size. An inline link takes the scale of the copy around it rather than being sized on its own.

#Icons

Icons are children, not a prop. A trailing icon is the direction cue — the external-link mark for a new tab, an arrow for “explore” — and a new tab still needs target and rel set by hand.

#Props