Buttons

RUI::Buttons is a namespace containing button variants. Buttons will often be used with data attributes to handle user interactions.

Buttons are meant to trigger actions within the current page, like form submissions or toggling elements, whereas links navigate to different pages. Use buttons for interactive functionality and links for moving between pages or sections.

Parameters

RUI::Buttons::[Variant].new(icon: nil, **attrs) { &block }

icon (string) optional
→ The tabler icon to be used for this link.

**attrs (hash) (optional)
→ Any additional attributes to be applied to the <button> HTML element.

&block (block) (optional)
→ The text content to be displayed inside the button.

Variants

Button variants are listed below.

render RUI::Buttons::Primary.new { "Primary Button" }
render RUI::Buttons::Primary.new(icon: 'star') { "Primary Button" }
render RUI::Buttons::Primary.new(icon: 'star')

render RUI::Buttons::Secondary.new { "Secondary Button" }
render RUI::Buttons::Secondary.new(icon: 'star') { "Secondary Button" }
render RUI::Buttons::Secondary.new(icon: 'star')

render RUI::Buttons::Outline.new { "Outline Button" }
render RUI::Buttons::Outline.new(icon: 'star') { "Outline Button" }
render RUI::Buttons::Outline.new(icon: 'star')

render RUI::Buttons::Destructive.new { "Destructive Button" }
render RUI::Buttons::Destructive.new(icon: 'star') { "Destructive Button" }
render RUI::Buttons::Destructive.new(icon: 'star')

render RUI::Buttons::Ghost.new { "Ghost Button" }
render RUI::Buttons::Ghost.new(icon: 'star') { "Ghost Button" }
render RUI::Buttons::Ghost.new(icon: 'star')

Additonal attributes

See the following example of passing data attributes to a button:

render RUI::Buttons::Primary.new(icon: "trash", data: { action: "user#delete" }) { "Delete User" }

This would result in the following HTML:

<button class="..." data-action="user#delete">...</button>