Alerts - Dismissible: Info, Warning & Dark Theme

A dismissible alert (also called a "toast" or a "dismissible notification") is a non-modal* pop-up notification used to provide simple visual feedback, inform users of stuff that isn't critical, and let them take action (if needed). Error messages are "critical", so dismissible alerts shouldn't be used for them.

Customize Alert content:

Select alert position:
Select alert style:

Enter title string:

Enter body text:

Has a checkbox?

Has a button?

Enter checkbox content:

Select button style:

Enter button text:

Dark Theme Buttons' text

Enter button one text:

Enter button two text:

Sample HTML output:

Copied successfully!

<div class="pcui">
	<pcui_dismissible_alert ref="dismissible-alert"
	dismissible-alert-position="{{alertPosition}}"
	dismissible-alert-style="{{alertStyle}}"
	title-text="{{titleString}}"
	body-text="{{bodyText}}"
	checkbox-content="{{checkboxContent}}"
	button-style="{{buttonStyle}}"
	button-text="{{buttonText}}"
	dark-theme-button-one-text="{{darkThemeBtnTextOne}}"
	dark-theme-button-two-text="{{darkThemeBtnTextTwo}}"></pcui_dismissible_alert>
</div>

Sample alert displayed on load:

Copied successfully!

<pcui_dismissible_alert is-displayed-on-load="true"></pcui_dismissible_alert>