Button link(ui_button_link)Bootstrap Logo

UiBibz::Ui::Core::Forms::Buttons::ButtonLink

A link with button appearance.

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_link content, options, html_options 

 # or by block 
 ui_button_link options, html_options do 
   content 
 end

Options

The specific options for this component are:
  • action[string](use component stimulus-options 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)
  • 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)
  • toggle[boolean]
  • tooltip[string/hash](use component tooltip method)
  • turbo[string](use component turbo method)
  • type[symbol](:block)

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
Primary Secondary Success Danger Warning Info Light Dark Link 
ui_button_link 'Primary', url: '#primary', status: :primary
ui_button_link 'Secondary', url: '#secondary', status: :secondary
ui_button_link 'Success', url: '#success', status: :success
ui_button_link 'Danger', url: '#danger', status: :danger
ui_button_link 'Warning', url: '#warning', status: :warning
ui_button_link 'Info', url: '#info', status: :info
ui_button_link 'Light', url: '#light', status: :light
ui_button_link 'Dark', url: '#dark', status: :dark
ui_button_link 'Link', url: '#link', status: :link

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

Outline

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

Primary Secondary Success Danger Warning Info Light Dark 
ui_button_link "Primary", url: "#primary", outline: true, status: :primary
ui_button_link "Secondary", url: "#secondary", outline: true, status: :secondary
ui_button_link "Success", url: "#success", outline: true, status: :success
ui_button_link "Danger", url: "#danger", outline: true, status: :danger
ui_button_link "Warning", url: "#warning", outline: true, status: :warning
ui_button_link "Info", url: "#info", outline: true, status: :info
ui_button_link "Light", url: "#light", outline: true, status: :light
ui_button_link "Dark", url: "#dark", outline: true, status: :dark

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

Size

The size option has following symbols for argument:
  • :lg
  • :md
  • :sm
Large button link Medium button link Small button link 
ui_button_link "Large button link", url: "#large-button-link", size: :lg
ui_button_link "Medium button link", url: "#medium-button-link"
ui_button_link "Small button link", url: "#small-button-link", size: :sm

<a class="btn-primary btn btn-lg" href="large-button-link">Large button link</a>
<a class="btn-primary btn" href="#medium-button-link">Medium button link</a>
<a class="btn-primary btn btn-sm" href="#small-button-link">Small button link</a>

Type

Block level button link Block level button link 
ui_button_link "Block level button link", url: "#block-level-button-link", status: :primary, type: :block
ui_button_link "Block level button link", url: "#block-level-button-link", status: :secondary, type: :block

<a class="btn-primary btn btn-block" href="#block-level-button-link">Block level button link</a>
<a class="btn-secondary btn btn-block" href="#block-level-button-link">Block level button link</a>

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
Primary Primary 
ui_button_link "Primary", url: "#active", state: :active
ui_button_link "Primary", url: "#disabled", state: :disabled

<a class="active btn-primary btn" href="#active">Primary</a>
<a class="disabled btn-primary btn" href="#disabled">Primary</a>

Options and html options

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

  • in line
  • in block
Primary Active Toggle Danger Info 2
ui_button_link "Primary Active", status: :primary, state: :active
ui_button_link "Toggle Danger", { status: :danger, glyph: :gem, toggle: true }, { class: "button" }
ui_button_link({ status: :success, badge: 2 }, { class: "button" }) do
  Info
end

<a class="button_link btn-success btn" href="#"><i class="glyph fa fa-gem"></i> Success</a>