Skip to main content

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

KeyField typeGuidelines
ATextKeep the text ‘short, relevant, and actionable’. It should not exceed more than 24 characters.
BIconThis 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 actionableMake it vague
Only use 'loading' on an actionMake it overly wordy
Relate the action to the content it sits besideUse icons for icons' sake
Use 'direct' for the primary action on the pageUse 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#

AttributeTypeDefaultOptionsDescription
typestringdirectdirect, textDifferent variants of the CTA.
hrefstringLinking to another location.
iconstringarrow-rightarrow-left, arrow-right See ns-icon componentThe icon inside the CTA
loadingstringfalsetrue, falseChange the state of the CTA for loading.
loadingMessagestringLoading...Overwrites the CTA anonymous slot for the loading state.
SlotsType
AnonymoustextNode

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",
    "typography": "action",
    "color": "#FFFFFF",
    "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%"
          }
        }
      }
    },
    "background-gradient": {
      "angle": "180deg",
      "stops": {
        "1": {
          "color": "#0099FF",
          "position": "-75%"
        },
        "2": {
          "color": "#005EB8",
          "position": "100%"
        }
      }
    }
  },
  "text": {
    "icon-position": "left",
    "typography": "action",
    "color": "#005EB8",
    "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!

Related links#