SutraUI.Alert (Sutra UI v0.2.0)

View Source

Displays a callout for user attention.

Alerts are used to communicate important information to users, such as success messages, warnings, or errors.

Examples

<.alert>
  <:icon><!-- Your icon here --></:icon>
  <:title>Success! Your changes have been saved</:title>
</.alert>

<.alert variant="destructive">
  <:icon><!-- Your icon here --></:icon>
  <:title>Something went wrong!</:title>
  <:description>Your session has expired. Please log in again.</:description>
</.alert>

Accessibility

  • Uses role="alert" for screen reader announcements
  • Semantic heading structure with h2 for title

Summary

Functions

alert(assigns)

Renders an alert component.

Functions

alert(assigns)

Renders an alert component.

Attributes

  • variant (:string) - The visual variant of the alert. Defaults to "default". Must be one of "default", or "destructive".
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["id", "role"].

Slots

  • icon - Optional icon slot.
  • title (required) - The alert title.
  • description - Optional description content.