Tabs

Published on February 04, 2021, updated on August 22, 2023

Insites Tabs is another way you can divide your Step/Process into separate individual steps. If you have more than a few fields on your form, it is good practice to separate your Form fields into tabs to avoid possibly overwhelming your users.

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

Tabs
Properties Options Notes
State Default, Active, Disabled, Error Select the state for the tab component.
Hover True, False Toggle to use the hover state of the tab component.
Show Icon True, False Toggle to show or hide the icon for the tab component.
Show LabelTrue, FalseToggle to show or hide the label for the tab component.
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.