Link – Automattic Design System

A styled anchor element with support for semantic color tones and an unstyled escape hatch.

Import

import { Link } from '@wordpress/ui';

Props

Name	Type	Default	Description
`variant`	`'default' \| 'unstyled'`	`'default'`	The visual treatment of the link. `default`: Applies tone-based color and underline styles. `unstyled`: Strips all visual styles so consumers can bring their own. @default “default”
`tone`	`'brand' \| 'neutral'`	`'brand'`	The tone of the link. Tone describes a semantic color intent. Only applies when `variant` is `default`. @default “brand”
`openInNewTab`	`boolean`	`false`	Whether to open the link in a new browser tab. When true, sets `target="_blank"` and appends a visual arrow indicator. @default false
`children`	`ReactNode`		The content to be rendered inside the component.

Examples

Default

const Default = () => <Link href="#">Learn more</Link>;

All Tones And Variants

Note: tone has no effect on unstyled variant

const AllTonesAndVariants = ( args ) => (
    <Stack direction="column" gap="lg">
        { ( [ 'brand', 'neutral' ] as const ).map( ( tone ) =>
            ( [ 'default', 'unstyled' ] as const ).map( ( variant ) => (
                <Stack
                    direction="column"
                    gap="xs"
                    key={ `${ tone }-${ variant }` }
                >
                    <Text variant="heading-sm">
                        { tone } tone, { variant } variant
                    </Text>
                    <Link { ...args } tone={ tone } variant={ variant } />
                </Stack>
            ) )
        ) }
    </Stack>
);

Inline

const Inline = () => <Text variant="body-md" render={ <p /> }>This is a paragraph with an <Link>inline link</Link>that inherits its
                typography from the parent Text component.
            </Text>;

Standalone

When composing Text and Link via the render prop, keep Text as the host and pass Link via render so the resulting element stays an <a>.

const Standalone = ( args ) => (
    <Text variant="body-md" render={ <Link { ...args } /> }>
        A standalone link with body-md typography
    </Text>
);