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.
Keep the text ‘short, relevant, and actionable’. It should not exceed more than 24 characters.
This is the icon inside the CTA. The specification table has a list of options.
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 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...".
You can see the live example of the loading state on storybook.
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
To be aware of the distinct roles of the CTA's types
text and that they don't always act as a
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...".
To see examples visit Storybook.
ns-cta should always live inside another component.
<ns-cta>Learn more about Hive</ns-cta>
Does it live in a panel?
Does it live inside other components?
✅ Yes -
What layout classes can be used?
Different variants of the CTA.
Linking to another location.
The icon inside the CTA
Change the state of the CTA for loading.
Overwrites the CTA anonymous slot for the loading state.
Icons are not descriptive, they are supplementary to the text.
Can be used instead of having a wrapper anchor
This shouldn't be used if
onClick event 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.
💩 🎉 🦄 You can also contact the team on Slack on the