CTA Link

Overview

CTA links direct users to a different page in order to complete an action. If no action is required on the new page Text Links should be used instead.

Usage

CTA Link

The base CTA Link that supports the use of variants.

Edit live code

Primary CTA Link

The primary variant of CTALink. These are used for performing routine tasks.

Edit live code

Secondary CTA Link

The secondary variant of CTALink.

Edit live code

Destructive Secondary CTA Link

The destructive secondary variant of CTALink. Used when linking user to a page with a destructive action.

Edit live code

Content

CTAs should be succinct and precise, here are some useful tips:

• Always use sentence case.
• Always use active language.
• Always be specific.
• Avoid repeating the same language you've used in a Heading.
• Avoid the use of personal possessive pronouns. This helps to keep the copy short.

Accessibility

In order to avoid confusion while using screen readers each CTA on a page should be unique. If this isn’t possible, use Visually Hidden.

Variations

Full Width

CTA Links are responsive by default and will be displayed as full width below the smallest breakpoint. You can override this by setting fullWidth="always" and fullWidth="never".

Edit live code

Using React Router

If you are using react router for internal linking pass Link from react-router-dom to the as property which will change the underlying element.

import { StaticRouter, Link } from 'react-router-dom';

<StaticRouter>
  <PrimaryCTALink as={Link} to="/map">Map</PrimaryCTALink>
</StaticRouter>
import { StaticRouter, Link } from 'react-router-dom';

<StaticRouter>
  <PrimaryCTALink as={Link} to="/map">Map</PrimaryCTALink>
</StaticRouter>

New Window

Links can be set to open in a new window by adding the opensInNewWindow prop. This will set the link target to _blank and display the new window icon. Screen reader users will hear opens in new window.

Edit live code

Customising variants

Custom variants can be defined in your theme using the variants property.

import { createTheme, CTALink } from '@ovotech/nebula';
import { ThemeProvider } from 'styled-components';

const Example = () => {
  const theme = createTheme({
    cta: {
      variants: {
        golden: {
          background: 'goldenrod',
          foreground: 'white',
          backgroundHover: 'darkgoldenrod',
          foregroundHover: 'white',
          border: 'goldenrod',
          borderHover: 'darkgoldenrod',
        }
      },
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <CTALink variant="golden">Custom variant</CTALink>
    </ThemeProvider>
  );
};
import { createTheme, CTALink } from '@ovotech/nebula';
import { ThemeProvider } from 'styled-components';

const Example = () => {
  const theme = createTheme({
    cta: {
      variants: {
        golden: {
          background: 'goldenrod',
          foreground: 'white',
          backgroundHover: 'darkgoldenrod',
          foregroundHover: 'white',
          border: 'goldenrod',
          borderHover: 'darkgoldenrod',
        }
      },
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <CTALink variant="golden">Custom variant</CTALink>
    </ThemeProvider>
  );
};

Properties

Tokens

Theme tokens

Related

• CTA Buttons
• Text Link