Insites Docs Design system Data DisplayTags

Tags

Last updated on April 04, 2025

The Insites tag component offers you an array of colors to choose from, both light and dark versions. Plus the ability to customise the text and add any icons from the Gallery!

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

Tags
Properties Options Notes
Light True, False Toggle to use the default or light colours for the tag.
Outlined True, False Toggle to use outlined or solid style of the tag component.
Color Grey, Blue, Red, Green, Yellow, Orange Select the color to use for the tag.
Label Enter the label for the tag.
Show Icon True, False Toggle to show or hide the icon for the tag.
IconEnter the icon for the tag. See the icons page to see the list of available icons. Copy and paste the icon to update the tag icon.
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.