Insites Docs Design system GeneralButtons

Buttons

Last updated on April 03, 2025

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

Button
Properties Options Notes
Colour Blue, Green, Warning Select the colour of the component.
Size Large, Normal, Small Select the size of the component.
Style Solid, Outlined, Default Select the style of the component.
State Default, Hover, Disabled, Loading Select the state of the component.
Show Icon Left True, False Toggle the display for the left icon.
Icon Left — Enter the icon to use for the left icon. See the icons page to see the list of available icons. Copy and paste the icon to update the tag icon.
Show Label True, False Toggle the display for the left icon.
Icon Left — Enter the label to use for the component.
Show Icon Right True, False Toggle the display for the right icon.
Icon Right — Enter the icon to use for the right icon. See the icons page to see the list of available icons. Copy and paste the icon to update the tag icon.
Option Button
Properties Options Notes
Colour Blue, Green, Warning Select the colour of the component.
Size Large, Normal, Small Select the size of the component.
Style Solid, Outlined, Default Select the style of the component.
State Default, Hover, Disabled, Loading Select the state of the component.
Show Icon Left True, False Toggle the display for the left icon.
Icon Left — Enter the icon to use for the left icon. See the icons page to see the list of available icons. Copy and paste the icon to update the tag icon.
Show Label True, False Toggle the display for the left icon.
Icon Left — Enter the label to use for the component.
Show Icon Right True, False Toggle the display for the right icon.
Icon Right — Enter the icon to use for the right icon. See the icons page to see the list of available icons. Copy and paste the icon to update the tag icon.
Dropdown Open True, False Select the toggle state of the dropdown indicator to show if opened or closed.
Action Button
Properties Options Notes
Colour Blue, Green, Warning Select the colour of the component.
Size Large, Normal, Small Select the size of the component.
Style Solid, Outlined, Default Select the style of the component.
State Default, Hover, Disabled, Loading Select the state of the component.
Icon — Enter the icon to use. See the icons page to see the list of available icons. Copy and paste the icon to update the tag icon.
Options Only Button
Properties Options Notes
Colour Blue, Green, Warning Select the colour of the component.
Size Large, Normal, Small Select the size of the component.
Style Solid, Outlined, Default Select the style of the component.
State Default, Hover, Disabled, Loading Select the state of the component.
Icon — Enter the icon to use. See the icons page to see the list of available icons. Copy and paste the icon to update the tag icon.
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.