CTA Button

Overview

CTA button is used to perform an action when clicked. Please note that, when taking the user to a new location, a CTA Link should be used instead.

Usage

CTA Button

The base CTA Button that supports the use of variants.

Edit live code

Primary CTA Button

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

Edit live code

Secondary CTA Button

The secondary variant of CTAButton. These should be used to perform an action other than the primary task.

Edit live code

Destructive CTA Button

The destructive variant of CTAButton. Destructive should only be used for destructive actions.

Edit live code

Loading state

Buttons have a boolean loading property which replaces the button content (including any icons) with a spinner animation when set. Use this to indicate to users that you're taking an action after the button has been clicked.

Edit live code

Content

CTAs should be succinct and precise:

• 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 Buttons by default will be responsive and will be displayed as full width below the smallest breakpoint. This can be overriden by setting fullWidth="always" and fullWidth="never".

Edit live code

Chevron Icon

Multi-part forms with CTAs like ‘Next’ or ‘Save & Continue’ should be buttons (because they submit forms). Including a chevron indicates that the journey is not complete.

Edit live code

Customising variants

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

import { createTheme, CTAButton } 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}>
      <CTAButton variant="golden">Custom variant</CTAButton>
    </ThemeProvider>
  );
};
import { createTheme, CTAButton } 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}>
      <CTAButton variant="golden">Custom variant</CTAButton>
    </ThemeProvider>
  );
};

Properties

Tokens

Theme tokens

Related

• CTA Link