Components / Alert

Alert

Stable

form feedback

Heads up

This is a default alert message.

Saved

Your changes have been saved successfully.

Heads up

We will rotate your API key in 7 days.

Something went wrong

Please retry, or contact support if the problem persists.

Usage example #

Copy this ERB into a Rails view after installing the component. The snippet below is the same code used by the live preview above.

app/views/.../alert_example.html.erb

<div class="w-full space-y-3">
  <%= render Senren::AlertComponent.new(variant: :default) do |a| %>
    <% a.with_title { "Heads up" } %>
    <% a.with_description { "This is a default alert message." } %>
  <% end %>
  <%= render Senren::AlertComponent.new(variant: :success) do |a| %>
    <% a.with_title { "Saved" } %>
    <% a.with_description { "Your changes have been saved successfully." } %>
  <% end %>
  <%= render Senren::AlertComponent.new(variant: :warning) do |a| %>
    <% a.with_title { "Heads up" } %>
    <% a.with_description { "We will rotate your API key in 7 days." } %>
  <% end %>
  <%= render Senren::AlertComponent.new(variant: :destructive) do |a| %>
    <% a.with_title { "Something went wrong" } %>
    <% a.with_description { "Please retry, or contact support if the problem persists." } %>
  <% end %>
</div>

Install this component #

Copy the official component into your app

Use this when you want the Senren-maintained implementation copied into app/components/senren.

Terminal

bin/rails senren:add alert

Create a custom component with the same conventions

Use this when you need an app-specific static component that follows Senren's ViewComponent structure.

Terminal

bin/rails generate senren:component alert --no-client

At a glance #

Category Data

Class name Senren::AlertComponent

Stimulus —

Variants default, info, success, warning, destructive

Depends on —

Pairs with form, page_header

Source #

app/components/senren/alert_component.html.erb

<%= tag.div(**root_attrs("relative w-full rounded-(--senren-radius) border p-4", role: aria_role)) do %>
  <% if title? %>
    <h5 class="mb-1 font-semibold leading-none tracking-tight"><%= title %></h5>
  <% end %>
  <% if description? %>
    <div class="text-sm opacity-90"><%= description %></div>
  <% end %>
  <%= content if !title? && !description? %>
<% end %>

app/components/senren/alert_component.rb

module Senren
  class AlertComponent < BaseComponent
    renders_one :title
    renders_one :description

    VARIANTS = {
      default: 'bg-[hsl(var(--senren-background))] text-[hsl(var(--senren-foreground))] border-[hsl(var(--senren-border))]',
      info: 'bg-[hsl(var(--senren-secondary))] text-[hsl(var(--senren-secondary-foreground))] border-transparent',
      success: 'bg-[hsl(var(--senren-success))] text-[hsl(var(--senren-success-foreground))] border-transparent',
      warning: 'bg-[hsl(var(--senren-warning))] text-[hsl(var(--senren-warning-foreground))] border-transparent',
      destructive: 'bg-[hsl(var(--senren-destructive))] text-[hsl(var(--senren-destructive-foreground))] border-transparent'
    }.freeze

    SIZES = { md: '' }.freeze

    def aria_role = variant == :destructive ? 'alert' : 'status'
  end
end

AI agent rules #

Use for

+form feedback
+page-level notices

Avoid

-transient toasts - use a toast component instead

Accessibility #

role=alert for error states; role=status for non-urgent updates.

Avatar

Card