FigMayo Logo

LIBRARIES

🎨 Foundations

core

Fills & Effects
Ctrl-K
βš™οΈ Primitives/Buttons
Updated 22 November 2024
Buttons

Overview

We have buttons designed for use across our application suite. There is various constraints on their usage which are outlined below.

Standard Buttons

We have specific button components for our Figma plugin that we can use. These should not be used on the web-app.

Button Alignment

In general buttons should always be aligned to the right with the affirmative action on the right of any negative action.

$fm-img

Avoid the use of multiple primary button variants next to one another.

$fm-img

Never mix button sizes

$fm-img
Primary(15 variants)
View Figma
Figma notes
This buttons come in 4 sizes: spacious, default, comfortable, compact. These can be toggled via the variable mode option. Night mode and dark mode are also baked in using variables and can be toggled on and off. const edit = false Item 1 Item 2 Item 3 One Two Three
Icon Buttons

Icon buttons should only be used in cases where there is limited space to initiate an action or for third level CTA’s such as closing modals or copying deep links. They should never be used for confirmation or as priority CTA’s.

tertiary(8 variants)
View Figma
Plugin Buttons

We have specific button components for our Figma plugin that we can use. These should not be used on the web-app.

Plugin-primary(6 variants)
View Figma
Multi Action Buttons

Multi action buttons allow the user to choose from a set of actions that the button can perform. Once selected the action will remain the default action of that button until the user changes the selection or the app relaods.

primary(6 variants)
View Figma