Alert

Alerts display important messages to users with contextual styling.

Alert Variants

Use different variants for different message types.

<%= render Rvk::AlertComponent.new(variant: :info) do %>
  <strong>Info:</strong> This is an informational message.
<% end %>

<%= render Rvk::AlertComponent.new(variant: :success) do %>
  <strong>Success:</strong> Your changes have been saved.
<% end %>

<%= render Rvk::AlertComponent.new(variant: :warning) do %>
  <strong>Warning:</strong> Please review before continuing.
<% end %>

<%= render Rvk::AlertComponent.new(variant: :danger) do %>
  <strong>Error:</strong> Something went wrong.
<% end %>

Dismissible Alert

Add a close button to dismiss the alert.

<%= render Rvk::AlertComponent.new(variant: :success, dismissible: true) do %>
  <strong>Success!</strong> Your profile has been updated.
<% end %>

Without Icon

Remove the icon for simpler alerts.

<%= render Rvk::AlertComponent.new(variant: :info, icon: false) do %>
  This is an alert without an icon.
<% end %>

Rich Content

Alerts can contain any HTML content.

<%= render Rvk::AlertComponent.new(variant: :info) do %>
  <h4 class="font-semibold mb-2">New features available</h4>
  <p class="mb-3">We've added several new features:</p>
  <ul class="list-disc list-inside space-y-1 text-sm">
    <li>Dark mode support</li>
    <li>Improved performance</li>
  </ul>
<% end %>

Props

Prop Type Default Description
variant Symbol :info Alert style: :info, :success, :warning, :danger
dismissible Boolean false Show close button (requires Stimulus)
icon Boolean true Show variant-specific icon