ns-cta

Introduction#

A call-to-action allows users to take action once they are ready for it.

We allow users to perform certain actions through the use of our call to actions (CTAs). It should always be clear to the user what the CTA's action is through text.

Content guidance#

CTA Direct#

CTA - Direct

CTA Text#

CTA - Text

Key	Field type	Guidelines
A	Text	Keep the text ‘short, relevant, and actionable’. It should not exceed more than 24 characters.
B	Icon	This is the icon inside the CTA. The specification table has a list of options.

Loading state#

The ns-cta is capable of handling a loading interaction using the loading and loadingMessage attributes, these can be found in the specification table below.

This loading state can be used to provide the user with visual feedback that their action is being handled. It also provides a user with reassurance when that action takes a number of seconds to be completed.

Your loading message should be contextual to the action of the text of the CTA. E.g. "Get a quote" becomes "Getting your quote...".

CTA - Loading state

You can see the live example of the loading state on storybook.

Best practice#

💚 Do's	💔 Dont's
Make it short and actionable	Make it vague
Only use 'loading' on an action	Make it overly wordy
Relate the action to the content it sits beside	Use icons for icons' sake
Use 'direct' for the primary action on the page	Use more than 24 characters
	Have multiple lines or sentences within a CTA
	Repeat CTA copy within the same page
	Use for downloads. Use the `ns-download` component instead

Considerations of best practice#

To be aware of the distinct roles of the CTA's types direct and text and that they don't always act as a primary and secondary button.
Try not to have multiple CTA's next to each other.
Don't overload the page with the same type of CTA or too many CTA's.
Loading message should be the action of the text of the CTA. E.g. "Get a quote" becomes "Getting your quote...".

Usage#

View example on Storybook

Component placement#

The ns-cta component can be used in the following components:

Specification#

Attribute	Type	Default	Options	Description
`type`	`string`	`direct`	`direct`, `text`	Different variants of the CTA.
`href`	`string`			Linking to another location.
`icon`	`string`	`arrow-right`	`arrow-left`, `arrow-right` See `ns-icon` component	The icon inside the CTA
`loading`	`string`	`false`	`true`, `false`	Change the state of the CTA for loading.
`loadingMessage`	`string`	`Loading...`		Overwrites the CTA anonymous slot for the loading state.

Slots	Type
Anonymous	textNode

Specification notes#

Icons#

Icons are not descriptive, they are supplementary to the text.

Href#

Can be used instead of having a wrapper anchor
This shouldn't be used if onClick event is added.

Design Tokens

You can change the branded look and feel of the ns-cta by modifying these options in the design tokens.

Read more about design tokens in our getting started guide.

{
  "icon-positions": {
    "direct": "right",
    "text": "left"
  },
  "focus-outline-color": " #FFDD57",
  "direct": {
    "icon": {
      "position": "right",
      "spacer": {
        "outside-left": "0.5rem"
      }
    },
    "typography": "action",
    "color": "#FFFFFF",
    "spacer": {
      "inside-top": "0.75rem",
      "inside-right": "1rem",
      "inside-bottom": "0.75rem",
      "inside-left": "1.25rem"
    },
    "disabled-background-color": "#005EB8",
    "box-shadow": [
      "rgba(170, 170, 170, 0.2) 0px 0px  5px 0px",
      "rgba(170, 170, 170, 0.4) -3px 3px 5px 0px",
      "rgba(51, 51, 51, 0.2) -5px 5px 20px;"
    ],
    "hover": {
      "box-shadow": [
        "rgba(170, 170, 170, 0.2) 0px 0px  1px 0px",
        "rgba(170, 170, 170, 0.4) -1px 1px 3px 0px",
        "rgba(51, 51, 51, 0.2) -1px 1px 10px;"
      ],
      "background-gradient": {
        "angle": "180deg",
        "stops": {
          "1": {
            "color": "#0099FF",
            "position": "-125%"
          },
          "2": {
            "color": "#005EB8",
            "position": "75%"
          }
        }
      }
    },
    "iconless": {
      "spacer": {
        "inside-right": "1.25rem"
      }
    },
    "background-gradient": {
      "angle": "180deg",
      "stops": {
        "1": {
          "color": "#0099FF",
          "position": "-75%"
        },
        "2": {
          "color": "#005EB8",
          "position": "100%"
        }
      }
    }
  },
  "text": {
    "icon": {
      "position": "left",
      "spacer": {
        "outside-right": "0.25rem"
      }
    },
    "typography": "action",
    "color": "#005EB8",
    "spacer": {
      "inside-right": "0.5rem"
    },
    "hover": {
      "color": "#003C71",
      "text-decoration-color": "rgba(51, 63, 72, .25)"
    },
    "focus": {
      "background-color": " #FFDD57",
      "text-decoration-color": "rgba(0, 60, 113, .5)"
    }
  }
}

Feedback#

Do you have insights or concerns to share? You can raise an issue via Github bugs.
See all the issues already raised via Github issues.

💩 🎉 🦄 You can also contact the team on Slack on the #product-nucleus channel!