A CTA (call-to-action) allows users to take action once they are ready for it.
Users can perform certain actions through the use of
ns-cta. An example of these actions could be to submit a form through an event (i.e. click event) or navigate with a hyperlink.
There is no distinciton between a hyperlink or an action through the design of
ns-cta. Use the text content to convey the intent of the CTA to the user.
|A||Text||Keep the text 'short, relevant, and actionable'. It should not exceed more than 24 characters.|
|B||Icon||This is a decoration. It is intended to imply direction such as moving forwards and backwards in a journey. The specification table has a list of options.|
The two types of
ns-cta are there to offer hierarchical structure to the page.
direct type has a more emphasised affordance, therefore it can be used as the main action for that page. As it's the main action, it should be used sparingly.
text type supports the
direct type and helps build hierarchy. It can be used for actions that are not the main reason for the page and can accommodate longer text content.
For example, on the Energy Hub Page the main purpose is for customers to get a quote. This action would be a
direct CTA supplementary information such as Seeing all tariffs, Energy guides or Learning about smart meters would be the
text type. We recommend when grouping actions through a set of cards they all use the same CTA type.
How to identify when to use the
For example, if the content starts with:
- Learn more...
- Find out...
- Look up...
- See our...
These are all supporting actions and our recommendation is to use the
If there is a group of more than three actions it would be preferable to make all these CTAs the
text type. Or to find the main action in this group and place it in an alternative, more suitable component such as
ns-standout to establish hierarchy.
There is no visual distinction between a button and a link when using
ns-cta. It's recommended not to use a native
<button> element, but to use the CTA with the required events.
The distinction for a user on either a navigation or an event is not based on the appearance but on the text content. It needs to be clear based on the text content that the user is either going to the next step in a journey / page, or that they are doing an action, such as submitting a form.
ns-cta is a standalone component that can serve an action whether it is a link or an event. However, if required it can be used as a decoration and be wrapped within an
<a> element or another routing component (such as for specific frameworks). This means that those functionalities will still look like the
ns-cta even though the functional task is being done outside of it.
ns-cta is capable of handling a loading interaction using the
loadingMessage attributes, these can be found in the specification table below.
This loading state is used to provide the user with feedback that their action is being handled. It also reassures the user that action may take a number of seconds to be completed.
We recommend only to use this loading state for a maximum of 5 seconds. If it's known that the action is likely to take longer than 5 seconds, present the user with a Roadblock page type.
If the action fails, don't leave the CTA in its Loading state. Present the user with clear feedback with the highlighter component.
Your loading message should be contextual to the action of the text of the CTA. E.g. "Get a quote" becomes "Getting your quote...".
You can see the live example of the loading state on Storybook.
We do not offer a disabled state, every CTA should have an action even if that is to an unhappy path. Such as, when in a form, a submit CTA will go to the highest invalid inputter to help the user to complete the form. It allows us to track the experience better when the user can interact with it.
If we use a disabled state in this example, it will infuriate the user as they wouldn't know what their next action is. This may force them to take an undesirable action, such as trying to call the call centre.
The only time we present a disabled state is during the Loading state. This ensures no accidental additional clicks are performed whilst the action is in progress.
|💚 Do's||💔 Dont's|
|Make it short and actionable||Make it vague|
|Only use ||Make it overly wordy|
|Relate the action to the content it sits beside||Change the icon for the sake of it|
|Use ||Use more than 24 characters|
|Use ||Have CTAs within a paragraph|
|Use instead of a native button||Repeat the CTA copy within the same page|
|Use for downloads. Use the |
- It should always be clear to the user what the CTA's action is through its text.
- To be aware of the distinct roles of the CTA's types
textand that they don't always act as a
- Try not to have multiple CTA's next to each other.
- Don't make the main purpose of the page to have a group of CTAs.
- Don't overload the page with the same type of CTA or too many CTAs.
loadingmessage should be the action of the text of the CTA. E.g. "Get a quote" becomes "Getting your quote...".
The ns-cta component can be used in the following components:
|Different variants of the CTA.|
|Navigating using a hyperlink.|
|The icon inside the CTA.|
|Change the state of the CTA to loading.|
|Overwrites the CTA anonymous slot for the loading state.|
- They are decorative, not descriptive, and are there to supplement the text.
- Can be used instead of having a wrapping
- This shouldn't be used if a
clickevent is added.
- 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.
💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.