Automattic Design System

Components

Link

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

See the Usage Guidelines for when to use Button, IconButton, Link, or LinkButton.

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

View on Storybook

View source on GitHub

PropsPermalink to this section

NameDefaultDescription
target

HTMLAttributeAnchorTarget | undefined

Where to open the linked document. "_blank" also adds the visual indicator and accessible new-tab notice.

When both target and openInNewTab are set, target determines the browsing context.

variant'default'

"default" | "unstyled"

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.
tone'brand'

"brand" | "neutral"

The tone of the link. Tone describes a semantic color intent. Only applies when variant is default.

openInNewTabfalse

boolean

Adds a visual indicator and accessible notice for opening in a new tab. Defaults target to "_blank" when no explicit target is set.

children

ReactNode

The content to be rendered inside the component.

style

CSSProperties

CSS style to apply to the element.

className

string

CSS class name to apply to the element.

render

ComponentRenderFn<HTMLAttributesWithRef<any>> | ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>> | undefined

Replaces the component’s default HTML element using a given React element, or a function that returns a React element.

ExamplesPermalink to this section

DefaultPermalink to this section

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

Open In New TabPermalink to this section

const OpenInNewTab = () => <Link href="https://wordpress.org" openInNewTab>Visit WordPress.org</Link>;

All Tones And VariantsPermalink to this section

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>
);

InlinePermalink to this section

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>;

StandalonePermalink to this section

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>
);