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

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

At the beginning of a line

In some cases, using this component at the beginning of a line can cause GitHub checks to fail.

<LinkOut href="https://openpayments.dev/">Open Payments</LinkOut> is an open RESTful API and an API standard that enables clients to interface with Open Payments-enabled accounts.

One way around this issue is to add {/* prettier-ignore */} above the line. However, we decided as a team that we don’t want to take this approach as it’s a bit messy and not a great practice.

As such, we’ve chosen to circumvent the issue by never starting a line with this component in any project. Instead, work the component into the beginning sentence. All it takes is a single word before the component to prevent failed checks.

The <LinkOut href="https://openpayments.dev/">Open Payments</LinkOut> APIs are open RESTful APIs that enable clients to interface with Open Payments-enabled accounts.

See Docs Design System Issue #24 for more information.

Working examples

With icon

Consult the OpenPayments API for more information.

Without icon

Consult the OpenPayments API for more information.