Buttons are used to provide users with a call to action. Typically allowing users to execute, choose, submit and confirm actions
Buttons allow users to interact with the page or product. Each page or product area (a form, modal, within an article) should not have more than 1 primary button, any remaining CTA's should be displayed as secondary or ghost buttons.
Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:
If an action a user takes is navigational, e.g. going back, a button should not be used.
https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMyHQ1qdwYyek5IBdhEEaND%2FFT-UI-Library%3Fnode-id%3D0%253A915
| Variant | Purpose |
|---|---|
| Primary | For principal calls to action on the page. Primary buttons should only appear once per product area (not including the application header, modal dialog, onsite messaging or side panel). |
| Secondary | For secondary actions on each page or used in conjunction with a primary button. As part of a pair, the secondary button’s function is to perform the negative action of the set, such as “Cancel” or “Back”. |
| Ghost | For the least pronounced actions; often used in conjunction with a primary button. In a situation such as a progress flow, a ghost button may be paired with a primary and secondary button set, where the primary button is for ‘Save and continue’ the ghost button would be ‘Skip’. |