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>

Build errors

Expected closing tag

Sometimes Starlight doesn’t like it when the first word of something (e.g., page, sentence, item in a list) is wrapped with the <LinkOut> tag.

If you see an error similar to the one below, move the LinkOut to another word/phrase or add a word before the tag.

Expected the closing tag `</LinkOut>` either after the end of `paragraph`
or another opening tag after the start of `paragraph`

LinkOut

Usage

Build errors

Expected closing tag

Working examples

With icon

Without icon