Components

Link

A link to a route or URL, inside running text or on its own line.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Inline

variant="inline" sits in running text and is always underlined, so the link is not told apart by colour alone.

See theTerms of usepage for details.

import { Link } from '@bigbang/ui';

export default function Inline() {
  return (
    <p className="type-body-md text-fg-default">
      See the
      <Link href="#">Terms of use</Link>
       page for details.
    </p>
  );
}

Standalone

variant="standalone" stands on its own line, uses the label text style and is underlined on hover. size gives 14 or 12 px.

Show all Show all

import { Link } from '@bigbang/ui';

export default function Standalone() {
  return (
    <div className="flex flex-col items-start gap-md">
      <Link href="#" variant="standalone">
        Show all
      </Link>
      <Link href="#" variant="standalone" size="sm">
        Show all
      </Link>
    </div>
  );
}

External link

external opens the destination in a new tab, adds rel="noopener noreferrer", an external-link icon and a visually hidden “(opens in a new tab)”.

Documentation Documentation

import { Link, Provider } from '@bigbang/ui';

export default function External() {
  return (
    <Provider locale="en-GB">
      <div className="flex flex-col items-start gap-md">
        <Link href="https://example.com" external>
          Documentation
        </Link>
        <Link href="https://example.com" external variant="standalone">
          Documentation
        </Link>
      </div>
    </Provider>
  );
}

Light and dark mode

The colour comes from the color-text-link and color-text-link-hovered tokens.

See theTerms of usepage for details.

import { Link } from '@bigbang/ui';

export default function Inline() {
  return (
    <p className="type-body-md text-fg-default">
      See the
      <Link href="#">Terms of use</Link>
       page for details.
    </p>
  );
}