ns-cta
#
IntroductionA 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 TextKey | 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 stateThe 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...".
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
andtext
and that they don't always act as aprimary
andsecondary
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#
Component placementThe ns-cta component can be used in the following components:
#
SpecificationAttribute | 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!