Getting Started
Components

Button

Description

The button component facilitates interactive user interactions and action triggers, customizable for diverse web application functionality.

FREE
This component is available for free. It implements the Bootstrap Button component. See the installation instructions below for more details.

Arguments

Name Default Type Description
text String Button text
href String Potential href attribute for the link button
tag button String The html tag of the button
Options: button, a, input
variant primary String The variant of the button
Options: primary, secondary, success, danger, warning, info, light, dark, link
size String The size of the component.
Options: lg, sm
html_attributes {} Hash Any attributes for the used html wrapper tag

Examples

Default 

<%= render Railsboot::ButtonComponent.new(text: "Button") %>

<button type="button" class="btn btn-primary">
  Button
</button>

Tags 

<%= render Railsboot::ButtonComponent.new(tag: "button", text: "Button") %>
<%= render Railsboot::ButtonComponent.new(tag: "a", text: "Link", href: "#") %>
<%= render Railsboot::ButtonComponent.new(tag: "input", text: "Input") %>

<button type="button" class="btn btn-primary">
  Button
</button>
<a class="btn btn-primary" href="#">
  Link
</a>
<input class="btn btn-primary" type="submit" value="Input" />

Child components 

<%= render Railsboot::Button::ButtonComponent.new(text: "Easy Button Button") %>
<%= render Railsboot::Button::LinkComponent.new(text: "Easy Button Link", href: "#") %>
<%= render Railsboot::Button::InputComponent.new(text: "Easy Button Input") %>

<button type="button" class="btn btn-primary">
  Easy Button Button
</button>
<a class="btn btn-primary" href="#">
  Easy Button Link
</a>
<input class="btn btn-primary" type="submit" value="Easy Button Input" />

Variants 

<%= render Railsboot::ButtonComponent.new(text: "Primary", variant: "primary") %>
<%= render Railsboot::ButtonComponent.new(text: "Secondary", variant: "secondary") %>
<%= render Railsboot::ButtonComponent.new(text: "Success", variant: "success") %>
<%= render Railsboot::ButtonComponent.new(text: "Danger", variant: "danger") %>
<%= render Railsboot::ButtonComponent.new(text: "Warning", variant: "warning") %>
<%= render Railsboot::ButtonComponent.new(text: "Info", variant: "info") %>
<%= render Railsboot::ButtonComponent.new(text: "Light", variant: "light") %>
<%= render Railsboot::ButtonComponent.new(text: "Dark", variant: "dark") %>
<%= render Railsboot::ButtonComponent.new(text: "Link", variant: "link") %>

<button type="button" class="btn btn-primary">
  Primary
</button>
<button type="button" class="btn btn-secondary">
  Secondary
</button>
<button type="button" class="btn btn-success">
  Success
</button>
<button type="button" class="btn btn-danger">
  Danger
</button>
<button type="button" class="btn btn-warning">
  Warning
</button>
<button type="button" class="btn btn-info">
  Info
</button>
<button type="button" class="btn btn-light">
  Light
</button>
<button type="button" class="btn btn-dark">
  Dark
</button>
<button type="button" class="btn btn-link">
  Link
</button>

Outline 

<%= render Railsboot::ButtonComponent.new(text: "Primary", variant: "primary", outline: true) %>
<%= render Railsboot::ButtonComponent.new(text: "Secondary", variant: "secondary", outline: true) %>
<%= render Railsboot::ButtonComponent.new(text: "Success", variant: "success", outline: true) %>
<%= render Railsboot::ButtonComponent.new(text: "Danger", variant: "danger", outline: true) %>
<%= render Railsboot::ButtonComponent.new(text: "Warning", variant: "warning", outline: true) %>
<%= render Railsboot::ButtonComponent.new(text: "Info", variant: "info", outline: true) %>
<%= render Railsboot::ButtonComponent.new(text: "Light", variant: "light", outline: true) %>
<%= render Railsboot::ButtonComponent.new(text: "Dark", variant: "dark", outline: true) %>
<%= render Railsboot::ButtonComponent.new(text: "Link", variant: "link", outline: true) %>

<button type="button" class="btn btn-outline-primary">
  Primary
</button>
<button type="button" class="btn btn-outline-secondary">
  Secondary
</button>
<button type="button" class="btn btn-outline-success">
  Success
</button>
<button type="button" class="btn btn-outline-danger">
  Danger
</button>
<button type="button" class="btn btn-outline-warning">
  Warning
</button>
<button type="button" class="btn btn-outline-info">
  Info
</button>
<button type="button" class="btn btn-outline-light">
  Light
</button>
<button type="button" class="btn btn-outline-dark">
  Dark
</button>
<button type="button" class="btn btn-outline-link">
  Link
</button>

Sizes 

<%= render Railsboot::ButtonComponent.new(text: "Large Button", size: "lg") %>
<%= render Railsboot::ButtonComponent.new(text: "Base Button") %>
<%= render Railsboot::ButtonComponent.new(text: "Small Button", size: "sm") %>

<button type="button" class="btn btn-primary btn-lg">
  Large Button
</button>
<button type="button" class="btn btn-primary">
  Base Button
</button>
<button type="button" class="btn btn-primary btn-sm">
  Small Button
</button>

With icon 

<div class="d-flex flex-wrap align-items-center gap-2">
  <div>
    <%= render Railsboot::ButtonComponent.new(size: "lg", class: "d-flex align-items-center gap-2") do %>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="flex-shrink-0" fill="currentColor" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
      </svg>
      <span>Large Button</span>
    <% end %>
  </div>
  <div>
    <%= render Railsboot::ButtonComponent.new(class: "d-flex align-items-center gap-1") do %>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="flex-shrink-0" fill="currentColor" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
      </svg>
      <span>Base Button</span>
    <% end %>
  </div>
  <div>
    <%= render Railsboot::ButtonComponent.new(size: "sm", class: "d-flex align-items-center gap-1") do %>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="flex-shrink-0" fill="currentColor" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
      </svg>
      <span>Small Button</span>
    <% end %>
  </div>
</div>

<div class="d-flex flex-wrap align-items-center gap-2">
  <div>
    <button type="button" class="btn btn-primary btn-lg d-flex align-items-center gap-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="flex-shrink-0" fill="currentColor" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
      </svg>
      <span>Large Button</span>
    </button>
  </div>
  <div>
    <button type="button" class="btn btn-primary d-flex align-items-center gap-1">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="flex-shrink-0" fill="currentColor" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
      </svg>
      <span>Base Button</span>
    </button>
  </div>
  <div>
    <button type="button" class="btn btn-primary btn-sm d-flex align-items-center gap-1">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="flex-shrink-0" fill="currentColor" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
      </svg>
      <span>Small Button</span>
    </button>
  </div>
</div>

Installation

Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:

  • A parent component class (app/components/railsboot/component.rb) of which all components inherit from.
  • A base component class (app/components/railsboot/base_component.rb) which is used for rendering internally.
  • The desired component itself (app/components/railsboot/button_component.rb).
  • A view template (app/components/railsboot/button_component.html.erb) for the component unless it's rendered inline.
  • Any other dependent components such as Slots (just if the component needs those)
  • Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
  • A test file for the components (test/components/railsboot/button_component_test.rb) including potential slot or dependency tests.

For more information please refer to the installation section.

Download

Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.

Breakpoint Debug Button Group