Alert

Contextual feedback messages for informing users about important information

Basic Alert

Simple alert with icon and message

This is an informational alert message.
Show Code

Alert Types

Different alert types for various messages

This is an informational alert message.
Show Code

Alert with Actions

Alerts containing action buttons

This is an informational alert message.
Show Code

Rich Content Alert

Alert with title and detailed content

This is an informational alert message.
Show Code

Compact Alert

Smaller alert for inline messages

This is an informational alert message.
Show Code

Usage Notes

  • Always include an appropriate icon to reinforce the message type
  • Use semantic colors: info (blue), success (green), warning (yellow), error (red)
  • Keep message text concise and actionable
  • Include action buttons when user needs to respond
  • Consider dismissible alerts for non-critical messages
  • Use proper heading hierarchy for rich content alerts
  • Ensure sufficient color contrast for accessibility