Link

When to use

Link takes the user to another page, section or address: references in text, “Show all”, documentation and external sources.

When not to use

• To run an action: Saving, deleting or opening something is done with a Button.
• When only an icon shows: Use an IconButton for actions; a link needs text.
• To make a link look like a button: Give Button render={<a href="..." />}.

Anatomy

Documentation (opens in a new tab)Documentation (opens in a new tab)

LightDark

Copy code

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>
  );
}

1. Text: the name of the link, in color-text-link.
2. Underline: always on an inline link, on hover for a standalone one.
3. External-link icon: only with external; decorative.
4. Hidden note: “(yeni sekmede açılır)” or “(opens in a new tab)”; screen readers read it at the end of the link name.

Behaviour

• Link renders a native <a href>; Enter and a click go to the destination.
• href is checked: relative paths and https:, http:, mailto:, tel: are kept. Schemes such as javascript:, data: and vbscript: are removed and the link renders without a destination.
• render renders the router’s link component; the styles and the href check still apply.
• external opens the new tab with target="_blank" and rel="noopener noreferrer".

Guidelines

• The link text says where it goes: “Terms of use”. Do not write “click here” or “more”.
• Use an inline link inside text; use a standalone link at the end of cards and lists.
• Open a new tab only for external sources; do not interrupt the user’s task.
• Do not give the same text different destinations on one page.

Content

• The link text is a short noun phrase; do not make a whole sentence the link.
• Do not show the raw address as the text; give a readable name.

Turkish	English
Tümünü göster	Show all
Kullanım koşulları	Terms of use
yeni sekmede açılır	opens in a new tab

Related components

• Button: runs an action; renders as a link when needed.
• Text: the text a link sits in.
• Icon: the external-link icon.