Alert
Alerts display important messages to users with contextual styling.
Alert Variants
Use different variants for different message types.
Info: This is an informational message.
Success: Your changes have been saved.
Warning: Please review before continuing.
Error: Something went wrong.
<%= 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.
Success! Your profile has been updated. Click the X to dismiss this 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.
This is an alert without an icon. Sometimes you just need plain text.
Warning without icon for a cleaner look.
<%= 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.
New features available
We've added several new features to improve your experience:
- Dark mode support
- Improved performance
- New components
<%= 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 |