# VelvetKit

## Alert (`UI::Alert`)

A highlighted message, optionally dismissible.

Add it: `bin/rails generate velvetkit:add alert`

Also adds: `icon`, `spinner`, `button`

Stimulus: `ui--alert`

### Arguments

```ruby
UI::Alert.new(variant: :default, dismissible: false, class: nil, **html_attrs)
```

Slots: `with_icon`, `with_title`, `with_description`

### Example: All Variants

```erb
<div class="flex flex-col gap-4 max-w-lg">
  <%= render(UI::Alert.new) do |alert| %>
    <% alert.with_title { "Default" } %>
    <% alert.with_description { "This is a default alert with important information." } %>
  <% end %>
  <%= render(UI::Alert.new(variant: :success)) do |alert| %>
    <% alert.with_title { "Success" } %>
    <% alert.with_description { "Your changes have been saved successfully." } %>
  <% end %>
  <%= render(UI::Alert.new(variant: :destructive)) do |alert| %>
    <% alert.with_title { "Destructive" } %>
    <% alert.with_description { "There was a problem with your request." } %>
  <% end %>
  <%= render(UI::Alert.new(variant: :warning)) do |alert| %>
    <% alert.with_title { "Warning" } %>
    <% alert.with_description { "This action cannot be undone." } %>
  <% end %>
  <%= render(UI::Alert.new(variant: :info)) do |alert| %>
    <% alert.with_title { "Info" } %>
    <% alert.with_description { "Here's some helpful information." } %>
  <% end %>
</div>
```

### Example: With Icon

```erb
<div class="flex flex-col gap-4 max-w-lg">
  <%= render(UI::Alert.new) do |alert| %>
    <% alert.with_icon(name: "badge-check") %>
    <% alert.with_title { "Custom icon" } %>
    <% alert.with_description { "Uses a custom badge-check icon instead of default." } %>
  <% end %>
  <%= render(UI::Alert.new(variant: :success)) do |alert| %>
    <% alert.with_icon(name: "circle-check", class: "text-emerald-600") %>
    <% alert.with_title { "Custom colored icon" } %>
    <% alert.with_description { "Icon color overridden via class prop." } %>
  <% end %>
</div>
```

### Example: Title Only

```erb
<div class="flex flex-col gap-4 max-w-lg">
  <%= render(UI::Alert.new) do |alert| %>
    <% alert.with_title { "Title only, no description" } %>
  <% end %>
  <%= render(UI::Alert.new(variant: :info)) do |alert| %>
    <% alert.with_title { "Info with custom icon" } %>
  <% end %>
  <%= render(UI::Alert.new(variant: :warning)) do |alert| %>
    <% alert.with_icon(name: "circle-alert") %>
    <% alert.with_title { "Warning with custom icon, title only" } %>
  <% end %>
</div>
```

### Example: With Link

```erb
<div class="flex flex-col gap-4 max-w-lg">
  <%= render(UI::Alert.new(variant: :info)) do |alert| %>
    <% alert.with_title { "Did you know?" } %>
    <% alert.with_description { "Check out the <a class='underline font-medium' href='/docs'>documentation</a> for more details.".html_safe } %>
  <% end %>
  <%= render(UI::Alert.new(variant: :success)) do |alert| %>
    <% alert.with_title { "Profile updated" } %>
    <% alert.with_description { "Your changes were saved. <a class='underline font-medium' href='/settings'>View your profile</a> to confirm.".html_safe } %>
  <% end %>
  <%= render(UI::Alert.new(variant: :warning)) do |alert| %>
    <% alert.with_title { "Action required" } %>
    <% alert.with_description { "Please <a class='underline font-medium' href='/verify'>verify your email</a> before continuing.".html_safe } %>
  <% end %>
  <%= render(UI::Alert.new(variant: :destructive)) do |alert| %>
    <% alert.with_title { "Payment failed" } %>
    <% alert.with_description { "Your card was declined. <a class='underline font-medium' href='/billing'>Update payment method</a> to retry.".html_safe } %>
  <% end %>
</div>
```