Skip to main content
USWDS + Tailwind

Link

Connect visitors to another page or more information with link styles and usage examples.

Examples

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

This is a text link on a light background.

This is a link to an external websiteExternal.

This is a link that opens in a new tabExternal, opens in a new tab.

This is a text link on a dark background.

This is an external text linkExternal, opens in a new tab on a dark background.

link-demo.tsx
import { Link } from '@uswds-tailwind/react'


export default function LinkDemo() {
  return (
    <div className="space-y-12">
      <div className="space-y-4">
        <p>
          This is
          {' '}
          <Link href="/docs/react/getting-started">a text link</Link>
          {' '}
          on a light background.
        </p>
        <p>
          This is
          {' '}
          <Link href="https://designsystem.digital.gov/" isExternal>
            a link to an external website
            <span className="sr-only">External</span>
          </Link>
          .
        </p>
        <p>
          This is
          {' '}
          <Link href="https://designsystem.digital.gov/" isExternal target="_blank" rel="noopener noreferrer">
            a link that opens in a new tab
            <span className="sr-only">External, opens in a new tab</span>
          </Link>
          .
        </p>
      </div>


      <div className="space-y-4 bg-gray-90 p-4 text-white">
        <p>
          This is
          {' '}
          <Link href="/docs/react/getting-started" variant="light">a text link</Link>
          {' '}
          on a dark background.
        </p>
        <p>
          This is
          {' '}
          <Link href="https://designsystem.digital.gov/" variant="light" isExternal target="_blank" rel="noopener noreferrer">
            an external text link
            <span className="sr-only">External, opens in a new tab</span>
          </Link>
          {' '}
          on a dark background.
        </p>
      </div>
    </div>
  )
}

Component API

Link is a styled native anchor. Supply an href and meaningful link text.

Accepts native anchor props and forwards its ref.

PropTypeDefaultDescription
variantblue | lightblueSelects the link color for the surrounding surface.
isExternalbooleanfalseAdds an external-link icon.

Accessibility

The external icon does not replace link text. Name the destination in the link content.