Badges

Default

Badges are used to provide additional context to an item like tagging.

Default 
= ui.nfg :badge, body: 'Default'
<span class="badge badge-primary">Default</span>
Variants

There are many options for variants. We typically use the :primary and :secondary options.

Primary Secondary Success Warning Danger 
= ui.nfg :badge, :primary, body: 'Primary'
= ui.nfg :badge, :secondary, body: 'Secondary'
= ui.nfg :badge, :success, body: 'Success'
= ui.nfg :badge, :warning, body: 'Warning'
= ui.nfg :badge, :danger, body: 'Danger'
<span class="badge badge-primary">Primary</span><span class="badge badge-secondary">Secondary</span><span class="badge badge-success">Success</span><span class="badge badge-warning">Warning</span><span class="badge badge-danger">Danger</span>
Badges with icon
Left Icon

By default, icons are placed to the left of any text inside a badge.

Icon on Left 
= ui.nfg :badge, body: 'Icon on Left', icon: 'rocket'
<span class="badge badge-primary"><i aria-hidden="true" class="fa fa-rocket mr-1"></i> Icon on Left</span>
Icon only

Using just an icon requires not including the body trait.

= ui.nfg :badge, icon: 'pencil'
<span class="badge badge-primary"><i aria-hidden="true" class="fa fa-pencil"></i></span>
Miscellaneous
Rounded (Pill)

Badges have the option to be rounded similar to buttons. We currently don't use rounded badges within our UI.

Rounded 
= ui.nfg :badge, :pill, body: 'Rounded'
<span class="badge badge-primary badge-pill">Rounded</span>
Link

Badges can also be links. Use the link to show related items that have the same badge.

Click Me
Traits

The badge component has these avaiable traits.

Trait
Options
Example
id:

Adds an ID to the badge.

id: 'my_id'
= ui.nfg :badge, id: 'my_id'
class:

Adds a class to the badge.

class: 'my-class'
= ui.nfg :badge, class: 'my-class'
describe:

For addding a data-describe to any badge.

describe: 'test-data-describe'
= ui.nfg :badge, describe: 'test-data-describe'
body:

Text for badge.

body: 'Default'
= ui.nfg :badge, body: 'Default'
href:

Used for adding links to badges.

href: 'http://www.networkforgood.com'
= ui.nfg :badge, body: 'HREF', href: 'http:www.networkforgood.com/'
icon:

Icons placed to the left of the text (default side).

icon: 'rocket'
= ui.nfg :badge, body: 'Icon', icon: 'rocket'
theme:

Determines the theme of the badge.

:primary
:secondary
:success
:warning
:danger
:info
:light
:dark
= ui.nfg :badge, :success, body: 'Success'
tooltip:

Shows a tooltip on badge.

tooltip: 'This is my tooltip!'
= ui.nfg :badge, body: 'Hover for tooltip', tooltip: 'Hi there!'
pill:

Shows the badge in pill form.

pill: true
= ui.nfg :badge, :pill, body: 'Rounded (Pill)'
render_if:

Condition to determine if the badge shows or not.

render_if: (1==1)
= ui.nfg :badge, body: 'Rendered', render_if: (1==1)
render_unless:

Condition to determine if the badge shows or not.

render_unless: (1==1)
= ui.nfg :badge, body: 'Not Rendered', render_unless: (1==1)