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
<CTAButton variant="primary">Plant a Tree</CTAButton>
<CTAButton variant="primary">Plant a Tree</CTAButton>

Primary CTA Button

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

Edit live code
<PrimaryCTAButton>Plant a Tree</PrimaryCTAButton>
<PrimaryCTAButton>Plant a Tree</PrimaryCTAButton>

Secondary CTA Button

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

Edit live code
<SecondaryCTAButton>Tell me more about trees</SecondaryCTAButton>
<SecondaryCTAButton>Tell me more about trees</SecondaryCTAButton>

Destructive CTA Button

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

Edit live code
<DestructiveCTAButton>Cancel my Tree</DestructiveCTAButton>
<DestructiveCTAButton>Cancel my Tree</DestructiveCTAButton>

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
<PrimaryCTAButton loading={true}>Save</PrimaryCTAButton>
<PrimaryCTAButton loading={true}>Save</PrimaryCTAButton>

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
<PrimaryCTAButton fullWidth="always">Save</PrimaryCTAButton>
<PrimaryCTAButton fullWidth="always">Save</PrimaryCTAButton>

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
<PrimaryCTAButton iconRight="chevron-right">Next</PrimaryCTAButton>
<PrimaryCTAButton iconRight="chevron-right">Next</PrimaryCTAButton>

Properties

Related

• CTA Link