Alerts

Contextual feedback messages for user actions — success, warning, error, and info variants.

Basic Alerts

Color-coded alerts with icons.

Success! Your changes have been saved.

Warning! Please check your input data.

Error! Something went wrong. Please try again.

Info: This is a helpful informational alert.

Dismissible Alerts

Alerts with a close button that removes them.

Success! Your changes have been saved.

Warning! Please check your input data.

Error! Something went wrong. Please try again.

Info: This is a helpful informational alert.

Solid Alerts

Full-color background variants for higher visual weight.

Success! Your changes have been saved.

Warning! Please check your input data.

Error! Something went wrong. Please try again.

Info: This is a helpful informational alert.

Alert with Description

Multi-line alert with title and body text.

Heads up!

You can add additional components and HTML markup in alerts. This is a longer description providing more detail about the situation.

Rounded Alerts

Pill-shaped alert variants.

Success! Your changes have been saved.

Warning! Please check your input data.