BetterUi Demo

Action Messages - Variants

All 9 semantic color variants for different message contexts

This is a primary informational message.

This is a secondary message.

This accent message highlights something special.

Operation completed successfully!
All changes have been saved.

Something went wrong.
Please check the form and try again.

Warning: This action cannot be undone.

Tip: You can also use keyboard shortcuts for faster navigation.

A light-themed message for subtle notices.

A dark-themed message for high emphasis.

<%= bui_action_messages(["Success message!"], variant: :success) %>
<%= bui_action_messages(["Error 1", "Error 2"], variant: :danger) %>
<%= bui_action_messages(["Warning message"], variant: :warning) %>
<%= bui_action_messages(["Info message"], variant: :info) %>

Action Messages - Styles

Four visual styles: solid, soft (default), outline, and ghost

Solid:

Solid style with full color background and white text.

Soft (default):

Soft style with light background and colored text.

Outline:

Outline style with white background and colored border.

Ghost:

Ghost style with transparent background and colored text.

<%= bui_action_messages(["Solid style"], variant: :info, style: :solid) %>
<%= bui_action_messages(["Soft style (default)"], variant: :info, style: :soft) %>
<%= bui_action_messages(["Outline style"], variant: :info, style: :outline) %>
<%= bui_action_messages(["Ghost style"], variant: :info, style: :ghost) %>

Action Messages - Features

Title, dismissible close button, and auto-dismiss timer

With title:

Changes Saved

Your profile has been updated.
Email notifications are now enabled.

Dismissible (click the X to close):

This message can be dismissed by clicking the close button.

Auto-dismiss (disappears after 3 seconds):

This message will automatically disappear in 3 seconds.

Form validation errors pattern:

Please correct the following errors:

Name can't be blank
Email is not a valid format
Password must be at least 8 characters

<%# With title %>
<%= bui_action_messages(
  ["Profile updated.", "Notifications enabled."],
  variant: :success,
  title: "Changes Saved"
) %>

<%# Dismissible %>
<%= bui_action_messages(
  ["Click X to close."],
  variant: :warning,
  dismissible: true
) %>

<%# Auto-dismiss after 3 seconds %>
<%= bui_action_messages(
  ["Disappears in 3 seconds."],
  variant: :info,
  style: :solid,
  dismissible: true,
  auto_dismiss: 3
) %>

<%# Form validation errors %>
<%= bui_action_messages(
  @user.errors.full_messages,
  variant: :danger,
  title: "Please correct the following errors:"
) %>

Progress Bars - Variants

Color variants at different progress values

Primary (25%)

Success (75%)

Danger (40%)

Warning (60%)

Info (90%)

Accent (50%)

<%= bui_progress(value: 25, variant: :primary) %>
<%= bui_progress(value: 75, variant: :success) %>
<%= bui_progress(value: 40, variant: :danger) %>
<%= bui_progress(value: 60, variant: :warning) %>

Progress Bars - Sizes

Four sizes from extra small to large

Extra Small (xs)

Small (sm)

Medium (md) - default

Large (lg)

<%= bui_progress(value: 65, size: :xs) %>
<%= bui_progress(value: 65, size: :sm) %>
<%= bui_progress(value: 65, size: :md) %>  <%# default %>
<%= bui_progress(value: 65, size: :lg) %>

Progress Bars - Features

Labels, value display, and animation

With label:

Upload Progress

With show_value:

72%

With label and show_value:

Processing 88%

Animated:

All features combined:

Downloading 55%

<%= bui_progress(value: 45, label: "Upload Progress") %>
<%= bui_progress(value: 72, variant: :success, show_value: true) %>
<%= bui_progress(value: 88, variant: :info, label: "Processing", show_value: true) %>
<%= bui_progress(value: 60, variant: :accent, animated: true) %>
<%= bui_progress(
  value: 55,
  variant: :warning,
  size: :lg,
  label: "Downloading",
  show_value: true,
  animated: true
) %>

Spinners

Loading indicators in all variants and sizes

Variants:

primary

secondary

accent

success

danger

warning

info

dark

Sizes:

xs

sm

md

lg

xl

<%# Variants %>
<%= bui_spinner(variant: :primary) %>
<%= bui_spinner(variant: :success) %>
<%= bui_spinner(variant: :danger) %>

<%# Sizes %>
<%= bui_spinner(variant: :primary, size: :xs) %>
<%= bui_spinner(variant: :primary, size: :sm) %>
<%= bui_spinner(variant: :primary, size: :md) %>  <%# default %>
<%= bui_spinner(variant: :primary, size: :lg) %>
<%= bui_spinner(variant: :primary, size: :xl) %>

FontAwesome Icons

Icon component for rendering Font Awesome icons with variants, sizes, and animations

Note: Font Awesome CSS is not loaded in this demo app. The FaIconComponent renders <i> tags with the appropriate FA classes, but icons will not be visible without the Font Awesome stylesheet. In your application, include Font Awesome CSS to see the icons rendered.

Basic icons (different styles):

heart (regular)

heart (solid)

user (solid)

bell (regular)

Color variants: