Fluxbit ViewComponents

Fluxbit::AlertComponent or fx_alert

The Fluxbit::AlertComponent is a customizable alert component that extends Fluxbit::Component. It provides various options to display alert messages with different styles, icons, and behaviors such as close functionality and animations.

To start using the alert box you can you the default way to call the component:

<%= render Fluxbit::AlertComponent.new(color: :danger).with_content('Alert') %>
or
<%= render Fluxbit::AlertComponent.new(color: :danger) do %>
    Alert
<% end %>

or you can use the alias (from the helpers):

<%= fx_alert(color: :danger).with_content('Alert') %>
or
<%= fx_alert(color: :danger) do %>
    Alert
<% end %>

The result is:

Options

Param Default Description
color: :info Sets the color scheme of the component, with being the standard color.
icon: :default Icon to be displayed (:default for default icon based on color).
can_close: true Adds a close button.
dismiss_timeout: 3000 Number of miliseconds before the alert disappears. Set to 0 to disable. Only works with Stimulus Component Notification installed.
out_animation: :fade_out Choose the dismiss animation. You can see the available options on the styles below.
fadeinanimation: true Set to true to fade in when the alert opens.
all_rounded: true Rounded corners on all sides with a border.
class_icon: nil Custom class styles to icon element
remove_class: "" Classes to be removed from the default class list.
**props Additional HTML attributes.

Note: The Fade out / Dissiming timeout animation only works with Stimulus Component Notification installed.

Examples

Default alert (with default icons)

Alerts with icon

Alerts without icon

Alerts with list

Fade Out / Dismissing timeout

Note: This Fade out / Dissiming timeout animation only works with Stimulus Component Notification installed.

Fade Out/Dismissing animation

Additional content

Adding/Removing classes

Adding other properties

Customization

You can customize the appearance and behavior of this component by passing different initialization parameters and adding custom styles. To do this you can create a initializer file like the:

# /config/initializerss/change_alert_component_defaults.rb
Fluxbit::Config::AlertComponent.color = :failure # the default is :info
Fluxbit::Config::AlertComponent.icon = :default # the default is :default
Fluxbit::Config::AlertComponent.can_close = false # the default is true
Fluxbit::Config::AlertComponent.out_animation = :fade_out # the default is :fade_out
Fluxbit::Config::AlertComponent.fade_in = true # the default is true
Fluxbit::Config::AlertComponent.dismiss_timeout = 5000 # the default is 3000
Fluxbit::Config::AlertComponent.all_rounded = true # the default is true
Fluxbit::Config::AlertComponent.styles[:all_rounded][:on] = '' # the default is 'rounded-lg border-2'

Dependencies

Styles

{
  "base": "flex p-4 mb-4 dark:bg-gray-800 ",
  "all_rounded": {
    "on": "rounded-lg border-2",
    "off": "rounded-l-lg border-l-2 border-y-2"
  },
  "colors": {
    "info": "text-blue-800 border-blue-300 bg-blue-50 dark:text-blue-400 dark:border-blue-800",
    "danger": "text-red-800 border-red-300 bg-red-50 dark:text-red-400 dark:border-red-800",
    "success": "text-green-800 border-green-300 bg-green-50 dark:text-green-400 dark:border-green-800",
    "warning": "text-yellow-800 border-yellow-300 bg-yellow-50 dark:text-yellow-300 dark:border-yellow-800",
    "dark": "border-gray-300 bg-gray-50 dark:border-gray-600"
  },
  "close_button": {
    "base": "ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex justify-center h-8 w-8 dark:bg-gray-800",
    "colors": {
      "info": "bg-blue-50 text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:text-blue-400 dark:hover:bg-gray-700",
      "danger": "bg-red-50 text-red-500 focus:ring-red-400 hover:bg-red-200 dark:text-red-400 dark:hover:bg-gray-700",
      "success": "bg-green-50 text-green-500 focus:ring-green-400 hover:bg-green-200 dark:text-green-400 dark:hover:bg-gray-700",
      "warning": "bg-yellow-50 text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:text-yellow-300 dark:hover:bg-gray-700",
      "dark": "bg-gray-50 text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white"
    }
  },
  "default_icons": {
    "info": "information-circle",
    "danger": "exclamation-triangle",
    "success": "check-circle",
    "warning": "exclamation-circle",
    "dark": "information-circle"
  },
  "animations": {
    "just_remove": {
      "from": "",
      "to": ""
    },
    "dont_remove": "",
    "fade_out": {
      "from": "opacity-100",
      "to": "opacity-0"
    },
    "fade_out_to_right": {
      "from": "opacity-100 translate-x-0",
      "to": "opacity-0 translate-x-6"
    },
    "fade_out_to_left": {
      "from": "opacity-100 translate-x-0",
      "to": "opacity-0 -translate-x-6"
    },
    "fade_out_to_top": {
      "from": "opacity-100 translate-x-0",
      "to": "opacity-0 -translate-y-6"
    },
    "fade_out_to_bottom": {
      "from": "opacity-100 translate-x-0",
      "to": "opacity-0 translate-y-6"
    },
    "fade_out_and_shrink": {
      "from": "opacity-100 scale-100",
      "to": "opacity-0 scale-50"
    },
    "fade_out_and_stretch": {
      "from": "opacity-100 scale-100",
      "to": "opacity-0 scale-150"
    },
    "fade_out_and_rotate": {
      "from": "opacity-100 rotate-0",
      "to": "opacity-0 rotate-45"
    }
  }
}

References

Flowbite Alert