Buttons

Published on February 03, 2021, updated on August 16, 2023

Below are all the available Button components Insites provides, with all its different modes:

Requirements

To use the buttons component in Figma please install the latest version of the Insites Font Icons.

Download the latest font file here.
Install the font file on your machine.
Restart Figma to load the file in your font list.

How to change icons in Figma

Open the icons list here.
Select and copy the icon you want to use from the list
Paste the icon into the icon layer in the component.

Figma Component Variant Properties

Buttons

Properties	Options	Notes
Size	Large, Normal, Small	Select the size of the component.
Style	Solid, Outlined, Default	Select the style of the component.
Colour	Blue, Green, Red	Select the colour of the component.
Type	Default, Option, Action	Select the type of the component.
State	Default, Disabled, Hover, Loading	Select the state of the component.
Show Icon Left	True, False	Toggle the display for the left icon.
Show Icon Right	True, False	Toggle the display for the right icon.
Dropdown State	Closed, Open	Select the correct icon to display if the button dropdown is open or closed.

Dropdown Options

Properties	Options	Notes
Hover	True False	Toggle to select the state of the dropdown option between default and hover.

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.