Link (deprecated)

Deprecated, NOT allowed for generation. Do not use this component when generating OTTO apps, pages or PDFs.

API from Storybook controls (LinkV1.stories.ts)

No generated API page exists for this component; these are the documented controls (argTypes).

Overview

Source: ./src/css-only-components/link/Link.mdx

Link

Important

This is a deprecated version of the link component. For the latest version, see the updated component documentation. Refer to this migration guide to update your project to the latest version.

Primary

Primary

Story: css-only-components-link-deprecated-latest--primary · tags: autodocs, components

That’s our main link. Use it if you want to provide a minor action or inline anchors.

Args: variant=primary, innerText=Link, size=100

{
  render: LinkElement,
  args: {
    variant: "primary",
    innerText: "Link",
    size: "100"
  }
}

Secondary

Secondary

Story: css-only-components-link-deprecated-latest--secondary · tags: autodocs, components

Secondary links do not provide sufficient affordance for classic actions. So this link really is just to be used for cases you don’t want to specifically point the user to, but maybe are legally obliged to.

Args: variant=secondary, innerText=Link, size=100

{
  render: LinkElement,
  args: {
    variant: "secondary",
    innerText: "Link",
    size: "100"
  }
}

Underlined

Underlined

Story: css-only-components-link-deprecated-latest--underlined · tags: autodocs, components

To be used in cases where you want to place a link on coloured surfaces - like Banners.

Args: variant=underlined, innerText=Link, size=100

{
  render: LinkElement,
  args: {
    variant: "underlined",
    innerText: "Link",
    size: "100"
  }
}

Underlined Bold

Underlined Bold

Story: css-only-components-link-deprecated-latest--underlined-bold · tags: autodocs, components

Args: variant=underlined-bold, innerText=Link, size=100

{
  render: LinkElement,
  args: {
    variant: "underlined-bold",
    innerText: "Link",
    size: "100"
  }
}

latest (v1)

Source: ./src/css-only-components/link/v1/LinkV1.stories.ts

Story Primary:

Story Secondary:

Story Underlined:

Story Underlined Bold:

Link as Button

Story: css-only-components-link-deprecated-latest--link-as-button · tags: autodocs, components

Args: variant=primary, innerText=Link, size=100

{
  render: ButtonElement,
  args: {
    variant: "primary",
    innerText: "Link",
    size: "100"
  }
}