LinkOut

This component forces external links to open in a new tab, overriding the default Starlight behavior.

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

To use the component, the page must be in .mdx format. 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.dev/">OpenPayments API</LinkOut>

To disable the indicator icon, set the withIcon prop to false.

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

Working examples

With icon

Consult the OpenPayments API for more information.

Without icon

Consult the OpenPayments API for more information.