Skip to content
GitHub

LinkOut

By default, external links within Starlight open in the same window. Use this component to force an external link to open in a new tab.

This component adds the necessary attributes for external links and adds an external link indicator icon to the end of the link content. The icon can be turned off, if necessary.

To use it, your docs page must be in .mdx format. Please change the format from .md to .mdx if necessary. All your existing markdown will still be supported without issue.

Usage

Import the LinkOut component like so:

import { LinkOut } from "@interledger/docs-design-system";

Use the <LinkOut> component within your content like so:

<LinkOut href="https://openpayments.guide/">OpenPayments API</LinkOut>

If you do not want the external link icon to appear, you can set the withIcon prop to false like so:

<LinkOut href="https://openpayments.guide/" withIcon={false}>
OpenPayments API
</LinkOut>

Working examples

With icon

Please consult the OpenPayments API for more information.

Without icon

Please consult the OpenPayments API for more information.