Fluxbit::ButtonComponent or fx_button :: Fluxbit ViewComponents

The Fluxbit::ButtonComponent is a customizable button component that extends Fluxbit::Component. It allows you to create buttons with various styles, sizes, colors, and supports additional features like popovers and tooltips.

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

<%= render Fluxbit::ButtonComponent.new.with_content('A button') %>
<!-- or -->
<%= render Fluxbit::ButtonComponent.new do %>
    A button
<% end %>

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

<%= fx_button(with_content: 'A button') %>
<!-- or -->
<%= fx_button do %>
    A button
<% end %>

The result is:

Options

Param	Default	Description
form:	nil	Form object (better used with FormBuilder)
color:	:default	Sets the color scheme of the component, with being the standard color.
pill:	false	If set to true, the component will have rounded corners, giving it a "pill" shape.
size:	1	Specifies the size of the component. Medium is the default size (e.g., 0 to 4).
as:	:button	Change the HTML element, for example, to "a" element.
popover_text:	nil	Popover text
popover_placement:	:right	Popover placement
popover_trigger:	:hover	Popover trigger: :hover or :click
tooltip_text:	nil	Tooltip text
tooltip_placement:	:right	Tooltip placement
tooltip_trigger:	:hover	Tooltip trigger: :hover or :click
remove_class:	""	Classes to be removed from the default class list.
**props		Additional HTML attributes.

Slots

The component supports the following slots:

with_popover: Add popover title and content with markup.
with_tooltip: Add tooltip content with markup.

Examples

Default buttons

Button pills

Gradient monochrome

Gradient duotone

Outline buttons

Button sizes

Button with icon (and animation)

Disabled buttons

With popover

With tooltip

Adding/Removing classes

Adding other properties

Override Button base component

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_button_component_defaults.rb
Fluxbit::Config::ButtonComponent.color = :failure # the default is :default
Fluxbit::Config::ButtonComponent.pill = :true # the default is false
Fluxbit::Config::ButtonComponent.size = :xl # the default is :md
Fluxbit::Config::ButtonComponent.as = :a # the default is :button
Fluxbit::Config::ButtonComponent.styles[:full_sized] = '' # the default is 'w-full'

Dependencies

Anyicon: Used for rendering icons.
Tailwind CSS: Used for styling the component.
Flowbite: Used for styling.

Styles

{
  "base": "group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden",
  "full_sized": "w-full",
  "colors": {
    "transparent": "text-slate-500 hover:text-slate-900 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white",
    "default": "text-white bg-blue-700 border border-transparent enabled:hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
    "success": "text-white bg-green-700 border border-transparent enabled:hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:enabled:hover:bg-green-700 dark:focus:ring-green-800",
    "failure": "text-white bg-red-700 border border-transparent enabled:hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:enabled:hover:bg-red-700 dark:focus:ring-red-900",
    "info": "text-white bg-cyan-700 border border-transparent enabled:hover:bg-cyan-800 focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:enabled:hover:bg-cyan-700 dark:focus:ring-cyan-800",
    "warning": "text-white bg-yellow-400 border border-transparent enabled:hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-900",
    "dark": "text-white bg-gray-800 border border-transparent enabled:hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 dark:bg-gray-800 dark:enabled:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700",
    "light": "text-gray-900 bg-white border border-gray-300 enabled:hover:bg-gray-100 focus:ring-4 focus:ring-cyan-300 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:enabled:hover:bg-gray-700 dark:enabled:hover:border-gray-700 dark:focus:ring-gray-700",
    "purple": "text-white bg-purple-700 border border-transparent enabled:hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:enabled:hover:bg-purple-700 dark:focus:ring-purple-900",
    "default_outline": "text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-hidden focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800",
    "success_outline": "text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:outline-hidden focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800",
    "failure_outline": "text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-hidden focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900",
    "info_outline": "text-cyan-400 hover:text-white border border-cyan-400 hover:bg-cyan-500 focus:ring-4 focus:outline-hidden focus:ring-cyan-300 dark:border-cyan-300 dark:text-cyan-300 dark:hover:text-white dark:hover:bg-cyan-400 dark:focus:ring-cyan-900",
    "warning_outline": "text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:outline-hidden focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900",
    "dark_outline": "text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:outline-hidden focus:ring-gray-300 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800",
    "light_outline": "text-gray-900 hover:text-white border border-gray-300 hover:bg-gray-300 focus:ring-4 focus:outline-hidden focus:ring-gray-300 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800",
    "purple_outline": "text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-hidden focus:ring-purple-300 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900",
    "info_gradient": "text-white bg-gradient-to-r from-cyan-500 via-cyan-600 to-cyan-700 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800 ",
    "failure_gradient": "text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800",
    "success_gradient": "text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800",
    "cyan_gradient": "text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800",
    "lime_gradient": "text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-800",
    "pink_gradient": "text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800",
    "purple_gradient": "text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800",
    "teal_gradient": "text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800",
    "cyan_to_blue_gradient": "text-white bg-gradient-to-r from-cyan-500 to-cyan-500 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800",
    "green_to_blue_gradient": "text-white bg-gradient-to-br from-green-400 to-cyan-600 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800",
    "pink_to_orange_gradient": "text-white bg-gradient-to-br from-pink-500 to-orange-400 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800",
    "purple_to_blue_gradient": "text-white bg-gradient-to-br from-purple-600 to-cyan-500 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800",
    "purple_to_pink_gradient": "text-white bg-gradient-to-r from-purple-500 to-pink-500 enabled:hover:bg-gradient-to-l focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-800",
    "red_to_yellow_gradient": "text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-red-100 dark:focus:ring-red-400",
    "teal_to_lime_gradient": "text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 enabled:hover:bg-gradient-to-l enabled:hover:from-teal-200 enabled:hover:to-lime-200 enabled:hover:text-gray-900 focus:ring-4 focus:ring-lime-200 dark:focus:ring-teal-700"
  },
  "disabled": "cursor-not-allowed opacity-50",
  "inner": {
    "base": "flex items-stretch items-center transition-all duration-200",
    "position": {
      "none": "",
      "start": "rounded-r-none",
      "middle": "rounded-none",
      "end": "rounded-l-none"
    },
    "outline": "border border-transparent"
  },
  "outline": {
    "off": "",
    "on": "justify-center transition-all duration-75 ease-in group-enabled:group-hover:bg-opacity-0 group-enabled:group-hover:text-inherit",
    "pill": {
      "off": "rounded-md",
      "on": "rounded-full"
    }
  },
  "pill": {
    "off": "rounded-lg",
    "on": "rounded-full"
  },
  "size": [
    "text-xs p-1",
    "text-sm p-1.5",
    "text-sm p-2",
    "text-base p-2.5",
    "text-base p-3"
  ],
  "group": "inline-flex rounded-md shadow-xs"
}

References

Flowbite Buttons

No matching results.

No matching results.

Fluxbit::ButtonComponent or fx_button

Options

Slots

Examples

Default buttons

Button pills

Gradient monochrome

Gradient duotone

Outline buttons

Button sizes

Button with icon (and animation)

Disabled buttons

With popover

With tooltip

Adding/Removing classes

Adding other properties

Override Button base component

Customization

Dependencies

Styles

References

Documentation

No matching results.

Previews

No matching results.

Options

Slots

Examples

Default buttons

Button pills

Gradient monochrome

Gradient duotone

Outline buttons

Button sizes

Button with icon (and animation)

Disabled buttons

With popover

With tooltip

Adding/Removing classes

Adding other properties

Override Button base component

Customization

Dependencies

Styles

References