Buttons

Figma

Locate the Assets tab in the Layers Panel.
There are two ways to locate the Button component needed:
- Use the search bar to search for a component grouping name or variation name.
- Scroll through the folders list and open the grouping.
Once the component needed is located, click and drag it into the frame/artboard.

Select the Button in the frame/artboard.
Locate and expand the highlighted layer in the Layers Panel.
Edit the text. If the text wraps over one line, resize the width of the button to avoid line breaks.
Never add height to buttons, only resize them horizontally in width.
For buttons that contain a nested icon:
- Locate and select the Icon > Nested icon > Placeholder Icon layer in the Layers Panel.
- Locate the Design tab in the Inspector Panel.
- Under the Instance section, click the icon name to expand the menu.
- Choose a new icon.

Property	Type	Required	Default	Description
variant	Enum 'contained' │ 'outlined' │ 'ghost' │ 'ghost_icon'	false	contained	Specifies which variant to use
color	Enum 'primary' │ 'secondary' │ 'danger'	false	primary	Specifies color
disabled	Bool	false	false	If `true`, the button will be disabled.
className	String	false	[Empty String]	@ignore
children	Custom	false	null	@ignore
href	String	false	undefined	URL link destination If defined, an 'a' element is used as root instead of 'button'
tabIndex	Number	false	0