Insites Docs Web Components V2LayoutAlert Box

Alert Box

Last updated on December 10, 2024.

Element: <ins-alert-box>

Creates an alert box for notifications.

Complete Example
Example
This is an alert box example.

Code Snippet

<ins-alert-box type="primary" close-icon="icon-close-1" no-close-button>
  <div>
    <strong>Example</strong><br />
    <span>This is an alert box example.</span>
  </div>
</ins-alert-box>
Types Example
Primary
This is an alert box primary type.

Success
This is an alert box success type.

Warning
This is an alert box warning type.

Error
This is an alert box error type.

Code Snippet

<ins-alert-box type="primary" close-icon="icon-close-1">
  <div>
    <strong>Primary</strong><br />
    <span>This is an alert box primary type.</span>
  </div>
</ins-alert-box>
<br />

<ins-alert-box type="success" close-icon="icon-close-1">
  <div>
    <strong>Success</strong><br />
    <span>This is an alert box success type.</span>
  </div>
</ins-alert-box>
<br />

<ins-alert-box type="warning" close-icon="icon-close-1">
  <div>
    <strong>Warning</strong><br />
    <span>This is an alert box warning type.</span>
  </div>
</ins-alert-box>
<br />

<ins-alert-box type="error" close-icon="icon-close-1">
  <div>
    <strong>Error</strong><br />
    <span>This is an alert box error type.</span>
  </div>
</ins-alert-box>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
type string primary primary, success, warning, error Defines what the color type of alert box will use.
close-icon string icon-close - Defines the font icon used on the alert box close button.
no-close-button boolean false true, false Defines if the alert box will not have a close button.
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.