Alert

Callout-style alerts for feedback and notices. Variants: default, success, warning, and error. Complete Initialization first, then use the CLI or copy the source below.

Preview

Live

A default alert with neutral styling.

Operation completed successfully.

Please review this before continuing.

Something went wrong. Please try again.

Add Alert via CLI

After init and layout theme wiring (see MY_UI_THEME_LAYOUT.md in your project), add the Alert component:

npm exec -- my-ui add alert

Component source

<div class="ui-alert ui-alert--default" role="alert">Default message</div>
<div class="ui-alert ui-alert--success" role="alert">Success message</div>
<div class="ui-alert ui-alert--warning" role="alert">Warning message</div>
<div class="ui-alert ui-alert--error" role="alert">Error message</div>