Cta And LinksReady
CTAs (call-to-actions) and Links enable users to navigate between pages or trigger specific actions within an application. CTA is based on the existing Button component.
<script lang="ts" setup>
const handleClick = () => {
alert('This button was clicked')
}
</script>
<template>
<div class="n-stack n-gap-m">
<div class="n-stack-horizontal n-gap-xxl">
<div class="n-stack n-gap-m">
<h3>CTA (Action)</h3>
<div>
<BaseButton @click.stop="handleClick">Cancel</BaseButton>
</div>
<div>
<BaseButton variant="primary" @click.stop="handleClick">
<provet-icon slot="start" name="interface-add"></provet-icon>
Create new
</BaseButton>
</div>
<div>
<BaseButton variant="plain" @click.stop="handleClick">
<provet-icon slot="start" name="arrow-left-long"></provet-icon>
Back
</BaseButton>
</div>
</div>
<div class="n-stack n-gap-m">
<h3>CTA (Text)</h3>
<div>
<BaseButton variant="text" @click.stop="handleClick">
Show more
</BaseButton>
</div>
<div>
<BaseButton variant="text" @click.stop="handleClick">
<provet-icon slot="start" name="interface-add"></provet-icon>
Add more tags
</BaseButton>
</div>
</div>
</div>
<provet-divider></provet-divider>
<div class="n-stack-horizontal n-gap-xxl n-margin-bs-s">
<div class="n-stack n-gap-m">
<h3 class="n-margin-be-xs">Text Link (Internal)</h3>
<BaseButton is-link to="#">John Dorian</BaseButton>
</div>
<div class="n-stack n-gap-m">
<h3 class="n-margin-be-xs">Text Link (External)</h3>
<BaseButton
is-link
to="https://provetcloud.design"
external
target="_blank"
>
ProvetCloud Design System page
</BaseButton>
</div>
</div>
</div>
</template>
<style scoped>
.n-stack-horizontal {
flex-flow: row;
justify-content: flex-start;
align-items: flex-start;
}
</style>Usage
CTA
Call-to-actions are used for action-oriented tasks like submitting, creating, or navigating within an app.
Do
- Use for primary actions that you want users to take, such as “Save”, “Create new”, “Cancel”, and “Back”.
- Label buttons clearly and concisely using action-oriented text.
- Avoid using buttons for inline navigation.
- Use clear and accurate labels. For example, use “Save” instead of “Submit”.
- Prioritize the most important actions. Too many CTAs will cause confusion.
- Be consistent with positioning of CTAs in the user interface.
- Use strong, actionable verbs in labels such as “Add”, “Close”, “Cancel”, or “Save”.
Don't
- Don’t use CTAs within text content.
- Don't use a primary CTA in every row of a table.
- Don’t use labels such as “Read more”, “Click here” or “More”.
- Avoid using CTAs for linking to other pages. Use a Link instead where necessary.
Link
Links are used for navigation and linking text-based content. They can either redirect users to internal or external pages.
Do
- Use links for inline navigation within text content.
- Keep link text clear and descriptive of the destination.
- Ensure links are visually distinguishable from regular text.
Don't
- Don’t style links to look like buttons (e.g. filled backgrounds or excessive padding).
- Don’t use for interface actions that aren’t links to other views in the app. Use CTA instead.
- Don’t use for form submit, cancel, edit, save and opening a modal. Use button instead.
Content guidelines
CTA and link labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click an action:
When writing CTA and link labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
Avoid unnecessary words and articles in CTA labels, such as “the”, “an” or “a”:
Integration
This product pattern is currently only available to use in the New Frontend for Provet Cloud (using Vue & Nuxt).
Troubleshooting
If you experience any issues while using this pattern, please ask for support in the #vet-frontend Slack channel.