Flowbite::Alert

Renders an alert element for showing feedback messages to the user.

The block given to the alert is used as its message.

Usage

<%= render(Flowbite::Alert.new) { "Something has happened!" } %>

With title and style

<%= render(Flowbite::Alert.new(style: :danger, title: "Danger alert!")) do %>
  Change a few things up and try submitting again.
<% end %>

With a list

<%= render(Flowbite::Alert.new(title: "Ensure that these requirements are met:")) do %>
  <ul class="mt-2 list-disc list-outside space-y-1 ps-2.5">
    <li>At least 10 characters</li>
  </ul>
<% end %>

With additional content

<%= render(Flowbite::Alert.new(bordered: true, title: "This is an info alert")) do |alert| %>
  <% alert.with_additional_content do %>
    <%= render(Flowbite::Button.new(size: :xs)) { "View more" } %>
  <% end %>
  More info about this alert.
<% end %>

Examples

Styles

Use these alert styles to show feedback messages to your users.

Without Icon

Hide the info icon shown at the start of the alert.

Bordered

Add a border in the color of the alert style.

Border Accent

Show a thick border at the top of the alert instead of rounded corners.

With List

The message block can contain richer content, such as a list.

Additional Content

Use the additional_content slot to add extra content, such as buttons, below the message. The title is then rendered as a heading.

Custom Styling

Add custom classes to the alert container.

API reference

Inherits from Flowbite

In namespace

Icon

Slots

`additional_content`		Content rendered below the message, for example action buttons. When given, the title is rendered as a heading next to the icon and the message below it.

Constructor

def initialize(border_accent: false, bordered: false, class: nil, icon: true, style: :info, title: nil, **options)

Parameters

`border_accent`	Boolean	Whether to show a thick top border accent instead of rounded corners (default: false).
`bordered`	Boolean	Whether to add a border in the color of the style (default: false).
`class`	String, Array<String>	Additional CSS classes for the alert container.
`icon`	Boolean	Whether to show an info icon (default: true).
`options`	Hash	Additional HTML options for the alert container.
`style`	Symbol	The color style of the alert (:danger, :dark, :info, :success, :warning).
`title`	String	An optional bold title shown before the message.