Insites Docs Design system LayoutAlert Box

Alert Box

Last updated on January 15, 2026

The Alert Box component provides a standardized way to design notifications and feedback messages. It includes built-in variants for different alert types (Primary, Success, Warning, Error) and component properties to toggle the close action and customize icons, ensuring design-to-code consistency with the Insites web component library.

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

Alert Box
Properties Options Notes
Type primary, success, warning, error Select one of the predefined color for the alert box
Show Close Button true/false Toggle Toggle to show or hide the close icon for the component. When disabled this will also hide the "Icon" property.
Close Button Icon

(default value)		 Enter the icon to use for the close button. See the icons page to see the list of available icons. Copy and paste the icon to update the button 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.