Fluxbit::ButtonComponent or fx_button

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:

&lt;%= render Fluxbit::ButtonComponent.new.with_content('A button') %&gt;

<!-- or -->

&lt;%= render Fluxbit::ButtonComponent.new do %&gt;
    A button
&lt;% end %&gt;

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

&lt;%= fx_button(with_content: 'A button') %&gt;

<!-- or -->

&lt;%= fx_button do %&gt;
    A button
&lt;% end %&gt;

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 <%=Fluxbit::Config::ButtonComponent.styles[:size].count - 1 %>).
as:	:button	Change the HTML element, for example, to “a” element.
selected:	false	If set to true, the button will appear darker to indicate selected state.
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

Selected buttons

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 = :danger # 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

  <%= html_escape(JSON.pretty_generate(Fluxbit::Config::ButtonComponent.styles)) %>

References

Flowbite Buttons