Button(ui_button)Bootstrap Logo

UiBibz::Ui::Core::Forms::Buttons::Button

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

 # by variable 
 ui_button content, options, html_options 

 # or by block 
 ui_button options, html_options do 
   content 
 end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • badge[hash/string](use component badge method)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • glyph[string/hash](use component glyph method)
  • outline[boolean]
  • popover[string/hash](use component popover method)
  • shortcut[string]To show shortuct in the title
  • size[symbol](:lg, :md, :sm)(use component size method)
  • state[symbol](:disabled, :active)(use component state method)
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • target[string](use component stimulus-options method)
  • text[boolean]
  • toggle[boolean]
  • tooltip[string/hash](use component tooltip method)
  • turbo[string](use component turbo method)

Examples

Some examples explain how to use the options present in the component.

Status

The status option has following symbols for argument:
  • :primary
  • :secondary
  • :success
  • :danger
  • :warning
  • :info
  • :light
  • :dark
ui_button 'Normal'
ui_button 'Primary', status: :primary
ui_button 'Secondary', status: :secondary
ui_button 'Success', status: :success
ui_button 'Danger', status: :danger
ui_button 'Warning', status: :warning
ui_button 'Info', status: :info
ui_button 'Light', status: :light
ui_button 'Dark', status: :dark
ui_button 'Link', status: :link

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

Outline

The background color of the buttons can be removed through the outline option that has for a Boolean argument.

ui_button 'Primary', status: :primary, outline: true
ui_button 'Secondary', status: :secondary, outline: true
ui_button 'Success', status: :success, outline: true
ui_button 'Danger', status: :danger, outline: true
ui_button 'Warning', status: :warning, outline: true
ui_button 'Info', status: :info, outline: true
ui_button 'Light', status: :light, outline: true
ui_button 'Dark', status: :dark, outline: true

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

Size

The size option has following symbols for argument:
  • :lg
  • :md
  • :sm
ui_button "Large button", status: :primary, size: :lg
ui_button "Medium button", status: :primary, size: :md
ui_button "Small button", status: :primary, size: :sm

<button class="btn-primary btn btn-lg">Large button</button>
<button class="btn-primary btn">Medium button</button>
<button class="btn-primary btn btn-sm">Small button</button>

block

Buttons can be presented as a block through the class .d-grid.


<div class="d-grid gap-2">
  ui_button "Block level button", status: :primary, type: :block
  ui_button "Block level button", status: :secondary, type: :block
</div>
<div class="d-grid gap-2 d-md-block">
  ui_button "Block level button", status: :primary, type: :block
  ui_button "Block level button", status: :secondary, type: :block
</div>

<div class="d-grid gap-2 d-md-block">
  <button class="btn-primary btn btn-block">Block level button</button>
  <button class="btn-secondary btn btn-block">Block level button</button>
</div>
<div class="d-grid gap-2 d-md-block">
  <button class="btn-primary btn btn-block">Block level button</button>
  <button class="btn-secondary btn btn-block">Block level button</button>
</div>

State

The buttons inherits the state option, this option is in element component This option lets you disable or enable the element about through these two arguments :

  • :active
  • :disabled
ui_button "Primary", status: :primary, state: :active
ui_button "Primary", status: :primary, state: :disabled

<button class="active btn-primary btn">Primary</button>
<button class="disabled btn-primary btn">Primary</button>

Options and html options

Like the component, the bouton element can be written in two ways :

  • in line
  • in block
ui_button "Primary Active", status: :primary, state: :active
ui_button "Toggle Danger", { status: :danger, glyph: :gem, toggle: true }, { class: "button" }
ui_button "Text", glyph: "gem", status: :success, text: false
ui_button({ status: :success, badge: 2 }, { class: "button" }) do
  Info
end
ui_button 'Warning', status: :warning, badge: { corner: true, content: 3, type: :pill, status: :danger }, class: "position-relative"

<button class="active btn-primary btn" role="button">Primary Active</button>
<button class="button btn-danger btn" role="button" data-bs-toggle="button" aria-pressed="false" autocomplete="off">
  <i class="glyph fa fa-gem"></i> Toggle Danger
</button>
<button class="btn-success btn without-text"><i class="glyph fa fa-gem"></i> &nbsp;</button>
<button class="button btn" role="button">
  Info<span class="badge-secondary badge">2</span>
</button>
<button class="btn-warning btn">Warning<span class="badge-danger badge badge-pill">3</span></button>