Components

Link

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

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Link } from '@bigbang/ui';
Source: Link.tsx
Storybook: Link · Playground

Link is in the @bigbang/ui package.

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

<Link href="/terms">Terms of use</Link>;
<Link href="https://example.com" external>Documentation</Link>;
<Link href="/list" variant="standalone">Show all</Link>;

Props

hrefRequired

Description: Destination: a relative path or an https:, http:, mailto: or tel: URL. Other schemes, such as javascript:, are removed and the link renders without a destination.
Type: string

external

Description: Opens the destination in a new tab with rel="noopener noreferrer", adds an external-link icon and a visually hidden "yeni sekmede açılır" or "opens in a new tab".
Type: boolean
Default: false

variant

Description: inline sits in running text and is always underlined; standalone stands on its own line, such as "Tümünü göster", and is underlined on hover.
Type: 'inline' | 'standalone'
Default: 'inline'

size

Description: Text size of a standalone link: 12 or 14 px. An inline link takes the size of the text around it.
Type: 'sm' | 'md'
Default: 'md'

render

Description: Renders the router's link component, such as <RouterLink to="..." />; the styles and the href check still apply.
Type: ReactElement | ComponentRenderFn<HTMLProps, {}>

className

Description: For layout only: margins and alignment. Do not use it to change the colour.
Type: string

childrenRequired

Description: The link text. Say where it goes ("Kullanım koşulları"), never "buraya tıklayın".
Type: ReactNode

Other <a> attributes such as download, hrefLang and onClick pass through.

Data attributes

data-component="link": on the root element.
data-external: when external is set.

With a router

<Link href="/list" render={<RouterLink to="/list" />}>
  Show all
</Link>