Badge(ui_badge)Bootstrap Logo

UiBibz::Ui::Core::Notifications::Badge

Add any of the below mentioned modifier classes to change the appearance of a badge.

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

 # or by block 
 badge 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)
  • popover[string/hash](use component popover method)
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • target[string](use component stimulus-options method)
  • tooltip[string/hash](use component tooltip method)
  • turbo[string](use component turbo method)
  • type[symbol](:pill, :square)
  • url[string]If url is used, tag change from span to link.

Examples

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

Badge

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

<span class="badge-primary badge">Primary</span>
<span class="badge-secondary badge">Secondary</span>
<span class="badge-success badge">Success</span>
<span class="badge-danger badge">Danger</span>
<span class="badge-warning badge">Warning</span>
<span class="badge-info badge">Info</span>
<span class="badge-light badge">Light</span>
<span class="badge-dark badge">Dark</span>

Badge Options

Use url options to change tag from span to a.

Primary Secondary Success Danger Warning Info Light Dark 
ui_badge 'Primary', status: :primary, type: :pill, glyph: 'gem', url: '#primary'
ui_badge 'Secondary', status: :secondary, type: :pill, glyph: 'gem', url: '#secondary'
ui_badge 'Success', status: :success, type: :pill, glyph: 'gem', url: '#success'
ui_badge 'Danger', status: :danger, type: :pill, glyph: 'gem', url: '#danger'
ui_badge 'Warning', status: :warning, type: :pill, glyph: 'gem', url: '#warning'
ui_badge 'Info', status: :info, type: :pill, glyph: 'gem', url: '#info'
ui_badge 'Light', status: :light, type: :pill, glyph: 'gem', url: '#light'
ui_badge 'Dark', status: :dark, type: :pill, glyph: 'gem', url: '#dark'

<a href="#primary" class="badge-primary badge badge-pill"><i class="glyph fa fa-gem"></i> Primary</span>
<a href="#secondary" class="badge-secondary badge badge-pill"><i class="glyph fa fa-gem"></i> Secondary</span>
<a href="#success" class="badge-success badge badge-pill"><i class="glyph fa fa-gem"></i> Success</span>
<a href="#danger" class="badge-danger badge badge-pill"><i class="glyph fa fa-gem"></i> Danger</span>
<a href="#warning" class="badge-warning badge badge-pill"><i class="glyph fa fa-gem"></i> Warning</span>
<a href="#info" class="badge-info badge badge-pill"><i class="glyph fa fa-gem"></i> Info</span>
<a href="#light" class="badge-light badge badge-pill"><i class="glyph fa fa-gem"></i> Light</span>
<a href="#dark" class="badge-dark badge badge-pill"><i class="glyph fa fa-gem"></i> Dark</span>

Badge on button

See the button section