Status
The status of the component
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Documentation link
A connected documentation page in Supernova
Usage Guidelines
CTA Group VS button toolbar
Call-to-Action (CTA) Groups are mostly used for submit-type actions, like sending a form or continuing to the next step of a process; a toolbar is mostly used for grouping actions that will take effect immediately, like chat-rich text options or for displaying the actions within a table.
Do
Use CTA Groups for submit-type actions in forms or dialog components.
Don't
Avoid using CTA Groups as toolbars.
Button purposes
The CTA group can contain up to 3 buttons, a primary, a secondary, and a dismissal button, you’ll find the purpose of each one.
Primary button
The primary button should be used for the main action of the form or dialog, it should be used for moving along to the next step.
Contrary to the secondary button, the primary buttons should always be displayed on a CTA Group.
Secondary button
If the necessity of a secondary action arises a secondary button can be added, a secondary button shouldn’t be used for moving backward or forwards, but for actions that affect the entire form, like “Saving a draft” if you need more than 1 secondary actions, consider using a secondary multi-button.
Dismissal button
Lastly, the dismissal button should be used for moving backward, a good example is a “Cancel” or “Going Back” button.
Dangerous actions
Whenever a dangerous action is going to take place, like the deletion of something. We should always change the primary button for a DANGER one. Ideally, every dangerous action should be located within a confirmation modal that explains the consequences of the dangerous actions in detail.
Multiple actions
We recommend using action buttons instead of adding extra buttons if you need more than two actions.
Caution
Although the usage of action buttons for displaying multiple primary/secondary actions is allowed, the primary actions should be somewhat related between them like, "Save and exit" and "Save an continue"
Don't
Avoid adding buttons next to the CTA Group for displaying more than 3 actions.
Alignment
The CTA group can be aligned to the left or the right.
Start
The buttons should be aligned to the left when their parent form IS NOT in a dialog-type component.
End
The buttons should be aligned to the right when their parent form IS a dialog-type component like modals, popovers, or toasts.
Content
Icons
We strongly recommend not using icons for any actions. This is to ensure the user understands each action correctly.
Do
Avoid icons to ensure a legible stack of actions.
Don't
We strongly recommend not using icons in any of the buttons to avoid misunderstandings.