Fluxbit ViewComponents

Fluxbit::BadgeComponent or fx_badge

The Fluxbit::BadgeComponent is a customizable badge component that extends Fluxbit::Component.
It allows you to create badges with different colors, sizes, borders, shapes (pill), and includes support for popovers and tooltips.

To start using the badge, you can use the default way to call the component:

<%= render Fluxbit::BadgeComponent.new.with_content("I'm a badge!") %>
<!-- or -->
<%= render Fluxbit::BadgeComponent.new do %>
  I'm a badge!
<% end %>

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

<%= fx_badge(with_content: "I'm a badge!") %>
<!-- or -->
<%= fx_badge do %>
  I'm a badge!
<% end %>

The result is:

Options

Param Default Description
color: :default Sets the color of the badge (e.g., :default, :failure, :success, etc.), which corresponds to predefined styles.
pill: false If set to true, the badge will have a "pill" shape (fully rounded edges).
size: 0 Defines the size of the badge (0 to 1).
perfect_rounded: 0 If set to something other than 0 (e.g., 0 to 5), the badge becomes a perfectly rounded shape sized accordingly.
as: :span The HTML element tag to use for the badge (e.g., :span, :div, etc.).
remove_class: "" Classes to be removed from the default badge class list.
popover_text: nil Text to display in a popover (from Fluxbit::Component).
popover_placement: :right Placement of the popover (e.g., :right, :left, :top, :bottom).
popover_trigger: :hover Popover trigger (:hover or :click).
tooltip_text: nil Text to display in a tooltip (from Fluxbit::Component).
tooltip_placement: :right Placement of the tooltip (e.g., :right, :left, :top, :bottom).
tooltip_trigger: :hover Tooltip trigger (:hover or :click).
**props Additional HTML attributes applied to the badge element.

Slots

The component supports the following slots:

  • with_popover: Add popover content (title and/or text) with markup.
  • with_tooltip: Add tooltip content with markup.

Examples

Default Badges

Pill Badges

Different Sizes

Badge link

Badge with icon

Badge with icon only

Notification Badge

Button with badge

Dismissible badges

With Popover

With Tooltip

Adding/Removing Classes

Adding Other Properties

Customization

You can customize the appearance and behavior of this component by passing different initialization parameters or adding custom styles.
You can also set global defaults or override existing styles in an initializer. For example:

# /config/initializers/change_badge_component_defaults.rb
Fluxbit::Config::BadgeComponent.color = :success       # default is :default
Fluxbit::Config::BadgeComponent.pill = true            # default is false
Fluxbit::Config::BadgeComponent.size = 1               # default is 0
Fluxbit::Config::BadgeComponent.as = :div              # default is :span
Fluxbit::Config::BadgeComponent.styles[:custom_style] = 'bg-pink-200'  # Add or override custom styles

Dependencies

Styles

To view the current styles configuration for the Fluxbit::BadgeComponent, you can inspect it as JSON:

{
  "base": "inline-flex items-center gap-1 font-medium me-2 rounded-sm",
  "pill": "rounded-full",
  "colors": {
    "info": "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
    "dark": "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300",
    "failure": "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
    "success": "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
    "warning": "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
    "indigo": "bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300",
    "purple": "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300",
    "pink": "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300",
    "cyan": "bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200",
    "lime": "bg-lime-100 text-lime-800 dark:bg-lime-900 dark:text-lime-400",
    "teal": "bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-400",
    "solid_info": "text-white bg-blue-500 border-1 border-white dark:border-gray-900",
    "solid_dark": "text-white bg-gray-500 border-1 border-white dark:border-gray-900",
    "solid_failure": "text-white bg-red-500 border-1 border-white dark:border-gray-900",
    "solid_success": "text-white bg-green-500 border-1 border-white dark:border-gray-900",
    "solid_warning": "text-white bg-yellow-500 border-1 border-white dark:border-gray-900",
    "solid_indigo": "text-white bg-indigo-500 border-1 border-white dark:border-gray-900",
    "solid_purple": "text-white bg-purple-500 border-1 border-white dark:border-gray-900",
    "solid_pink": "text-white bg-pink-500 border-1 border-white dark:border-gray-900",
    "solid_cyan": "text-white bg-cyan-500 border-1 border-white dark:border-gray-900",
    "solid_lime": "text-white bg-lime-500 border-1 border-white dark:border-gray-900",
    "solid_teal": "text-white bg-teal-500 border-1 border-white dark:border-gray-900",
    "info_bordered": "bg-blue-100 text-blue-800 dark:bg-gray-700 dark:text-blue-400 border border-blue-400",
    "dark_bordered": "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400 border border-gray-500",
    "failure_bordered": "bg-red-100 text-red-800 dark:bg-gray-700 dark:text-red-400 border border-red-400",
    "success_bordered": "bg-green-100 text-green-800 dark:bg-gray-700 dark:text-green-400 border border-green-400",
    "warning_bordered": "bg-yellow-100 text-yellow-800 dark:bg-gray-700 dark:text-yellow-300 border border-yellow-300",
    "indigo_bordered": "bg-indigo-100 text-indigo-800 dark:bg-gray-700 dark:text-indigo-400 border border-indigo-400",
    "purple_bordered": "bg-purple-100 text-purple-800 dark:bg-gray-700 dark:text-purple-400 border border-purple-400",
    "pink_bordered": "bg-pink-100 text-pink-800 dark:bg-gray-700 dark:text-pink-400 border border-pink-400",
    "cyan_bordered": "bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200 border border-cyan-400",
    "lime_bordered": "bg-lime-100 text-lime-800 dark:bg-lime-900 dark:text-lime-400 border border-lime-400",
    "teal_bordered": "bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-400 border border-teal-400"
  },
  "sizes": [
    "p-1 text-xs",
    "p-1.5 text-sm"
  ],
  "perfect_rounded": [
    "h-fit px-2.5 py-0.5",
    "justify-center w-4 h-4",
    "justify-center w-6 h-6",
    "justify-center w-8 h-8",
    "justify-center w-10 h-10",
    "justify-center w-12 h-12"
  ],
  "notification": {
    "default": "absolute",
    "positions": {
      "top": "-top-1",
      "bottom": "top-5",
      "left": "end-4",
      "right": "-end-4"
    }
  },
  "dismissable": "ml-2 cursor-pointer"
}

This will output a JSON representation of the default style mappings for the Badge component.

References

Flowbite Badges