Design system
Alert Box
Last updated 2 November 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 these components in Figma, install the latest Insites font icons.
- Download the Insites icon font.
- Install the font file on your computer.
- Restart Figma so the font shows in your font list.
To change an icon, copy it from the font icons list and paste it into the icon layer of 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 |