Blocks

Alert

Displays a short, important message that attracts the user's attention.

Installation

bin/rails g shadcnrb:component alert

Usage

Use sui.alert with alert_title and alert_description inside a block.

Heads up!

This is an informational alert message.

<%= sui.alert do %>
  <%= sui.alert_title "Heads up!" %>
  <%= sui.alert_description "This is an informational alert message." %>
<% end %>

Variants

Use variant: :destructive to communicate an error or dangerous state.

Something went wrong

Your session has expired. Please sign in again.

<%= sui.alert variant: :destructive do %>
  <%= sui.alert_title "Something went wrong" %>
  <%= sui.alert_description "Your session has expired. Please sign in again." %>
<% end %>

With icon

Place sui.icon before the title — the grid layout aligns it automatically.

Heads up!

You can add components to your app using the CLI.

Error

Your payment method could not be processed.

<!-- variant: :default -->
<%= sui.alert do %>
  <%= sui.icon :"circle-alert" %>
  <%= sui.alert_title "Heads up!" %>
  <%= sui.alert_description "You can add components to your app using the CLI." %>
<% end %>
<!-- variant: :destructive -->
<%= sui.alert variant: :destructive do %>
  <%= sui.icon :"circle-x" %>
  <%= sui.alert_title "Error" %>
  <%= sui.alert_description "Your payment method could not be processed." %>
<% end %>

API

Method	Args	Default	Description
`alert(name)`	`variant:`	`:default`	Container element. `variant:` is one of `:default` `:destructive`.
`alert_title(name)`	—	—	Bold, single-line heading for the alert. Accepts a string or block.
`alert_description(name)`	—	—	Supporting text displayed below the title. Accepts a string or block.