Fluxbit::LinkComponent or fx_link

The Fluxbit::LinkComponent is a customizable link component that extends Fluxbit::Component. It allows you to create anchor elements with various color styles and supports additional features like hover effects and custom styling.

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

&lt;%= render Fluxbit::LinkComponent.new(href: "/path").with_content('Link text') %&gt;

&lt;!-- or --&gt;

&lt;%= render Fluxbit::LinkComponent.new(href: "/path") do %&gt;
    Link text
&lt;% end %&gt;

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

&lt;%= fx_link(with_content: 'Link text', href: '/path') %&gt;

&lt;!-- or --&gt;

&lt;%= fx_link(href: '/path') do %&gt;
    Link text
&lt;% end %&gt;

The result is:

Options

Param	Default	Description
color:	:primary	Sets the color scheme of the link (:default, :primary, :secondary, :success, :danger, :warning, :info, :light, :dark).
href:	”#”	The URL that the link points to.
remove_class:	””	Classes to be removed from the default class list.
**props		Additional HTML attributes.

Slots

This component does not define any named slots. The text/content for the link is provided through the default block:

&lt;%= render Fluxbit::LinkComponent.new(href: "/path") do %&gt;
  This is the link content
&lt;% end %&gt;

Examples

Default links

Colored links

Links with custom attributes

External links

Links in text

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/initializers/change_link_component_defaults.rb

Fluxbit::Config::LinkComponent.color = :danger # the default is :primary
Fluxbit::Config::LinkComponent.styles[:base] = "font-semibold text-blue-700 dark:text-blue-600 hover:text-blue-800" # customize base styling
Fluxbit::Config::LinkComponent.styles[:colors][:custom] = "text-purple-600 dark:text-purple-500 hover:text-purple-800"

Dependencies

Tailwind CSS: Used for styling the component.
Flowbite: Used for styling.

Styles

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

References

Flowbite Links