Buttons

Default

The default button is used for most cases. It is not impactful enough to represent the primary action in a container.

Default 
= ui.nfg :button, :secondary, body: 'Default'
<a class="btn btn-secondary" href="#">Default</a>
Variants
Primary

Use a primary button to call attention to an action on a form or to highlight the most important call to action on a page. Primary buttons should only appear once per container. Not every screen requires a primary button.

Primary 
= ui.nfg :button, :primary, body: 'Primary'
<a class="btn btn-primary" href="#">Primary</a>
Important

Use an important button to call attention to actions that are more important than primary buttons. Important buttons should only appear once per page. Not every screen requires a important button.

Important 
= ui.nfg :button, :success, body: 'Important'
<a class="btn btn-success" href="#">Important</a>
Link

Use a link button when the action isn't a primary or secondary action. Ex: 'Cancel' button in a modal.

Link
Warning

A warning button appears before we request the customer to take action, usually in anticipation of a significant change. These are found mostly in confirmation modals.

Warning 
= ui.nfg :button, :warning, body: 'Warning'
<a class="btn btn-warning" href="#">Warning</a>
Danger

The danger button appears as a final confirmation for a destructive action such as deleting. These are found mostly in confirmation modals.

Danger 
= ui.nfg :button, :danger, body: 'Danger'
<a class="btn btn-danger" href="#">Danger</a>
Types

Use the button classes on any anchor or button elements. There is a :submit trait to use as well.

Anchor Element 
= ui.nfg :button, :secondary, as: :button, body: 'Button Element'
= ui.nfg :button, :secondary, as: :a, href: '#', body: 'Anchor Element'
= ui.nfg :button, :secondary, :submit, body: 'Submit Button'
<button class="btn btn-secondary" type="button">Button Element</button>
<a class="btn btn-secondary" href="#">Anchor Element</a>
<button class="btn btn-secondary" type="submit">Submit Button</button>
Sizes

There are three sizes for buttons: small, medium (default), and large. Large is typically used for the primary action on pages or modals. Small is typically used for contextual help (ex: expand/collapse). Medium is used everywhere else.

Large Medium Small 
= ui.nfg :button, :secondary, :lg, body: 'Large'
= ui.nfg :button, :secondary, body: 'Medium'
= ui.nfg :button, :secondary, :sm, body: 'Small'
<a class="btn btn-lg btn-secondary" href="#">Large</a>
<a class="btn btn-secondary" href="#">Medium</a>
<a class="btn btn-sm btn-secondary" href="#">Small</a>
States
Disabled

Some buttons need to be displayed disabled on load until an action is performed or something is unlocked.

Disabled Disabled 
= ui.nfg :button, :secondary, :disabled, body: 'Disabled'
= ui.nfg :button, :primary, :disabled, body: 'Disabled'
<a class="btn disabled btn-secondary" href="#" tabindex="-1">Disabled</a>
<a class="btn disabled btn-primary" href="#" tabindex="-1">Disabled</a>
Active

Use the active trait when showing an option that is selected. Ex: A status that is defaulted on.

Active Active 
= ui.nfg :button, :secondary, body: 'Active', active: true
= ui.nfg :button, :primary, body: 'Active', active: true
<a class="btn active btn-secondary" href="#" aria-pressed="true">Active</a>
<a class="btn active btn-primary" href="#" aria-pressed="true">Active</a>
Buttons with icon
Right Icon

By default, icons are placed to the right of any text inside a button.

Icon on Right 
= ui.nfg :button, :secondary, body: 'Icon on Right', icon: 'caret-right'
<a class="btn btn-secondary" href="#">Icon on Right<i aria-hidden="true" class="fa fa-caret-right ml-1"></i></a>
Left Icon

If the button calls for an icon to the left of the text, use the left_icon trait.

Icon on Left 
= ui.nfg :button, :secondary, body: 'Icon on Left', left_icon: 'caret-left'
<a class="btn btn-secondary" href="#"><i aria-hidden="true" class="fa fa-caret-left mr-1"></i>Icon on Left</a>
Icons on both sides

Use both icon traits to display two icons or to surround the button's body.

= ui.nfg :button, :secondary, icon: 'caret-down', left_icon: 'gear'
<a class="btn btn-secondary" href="#"><i aria-hidden="true" class="fa fa-gear mr-1"></i><i aria-hidden="true" class="fa fa-caret-down"></i></a>
Icon only

Using just an icon requires not including the body trait.

= ui.nfg :button, :secondary, icon: 'pencil'
<a class="btn btn-secondary" href="#"><i aria-hidden="true" class="fa fa-pencil"></i></a>
Miscellaneous
Block

Use the block trait to make the button span the entire width of it's container.

Block Button 
= ui.nfg :button, :secondary, :block, body: 'Block Button'
<a class="btn btn-secondary btn-block" href="#">Block Button</a>
Rounded (Pill)

In public displays, we typically use the rounded pill button option.

Rounded 
= ui.nfg :button, body: 'Rounded', class: 'rounded-pill'
<a class="btn rounded-pill btn-primary" href="#">Rounded</a>
Traits

The button component has these avaiable traits.

Trait
Options
Example
id:

Adds an ID to the button.

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

Adds a class to the button.

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

For addding a data-describe to any button.

describe: 'test-data-describe'
= ui.nfg :button, describe: 'test-data-describe'
active:

Used for buttons in an active state.

active: true
= ui.nfg :button, :secondary, body: 'Active', active: true
as:

Determines the type of html element to render the button as.

:button
:a
= ui.nfg :button, :secondary, as: :button, body: 'Button'
block:

Used for block buttons spanning the width of container.

:block
= ui.nfg :button, :secondary, :block, body: 'Block Button'
body:

Text for button.

body: 'Click Here'
= ui.nfg :button, :secondary, body: 'Click Here'
modal:

Opens a modal from a button.

modal: '#test_modal'
= ui.nfg :button, modal: '#test_modal', body: 'Open Modal'
close:

Used for closing dialogs (alerts, modals, popover, toats, etc.).

:close
= ui.nfg :button, :close, dismiss: 'modal'
confirm:

For a confirming dialog after the button is clicked.

confirm: 'Are you sure?'
= ui.nfg :button, :secondary, body: 'Method Delete', method: :delete, confirm: 'Are you sure?'
disable_with:

Used to show after a button has been "submitted" and needs a loading state. Default text is "Saving".

:disable_with
disable_with: 'Disable with text'
= ui.nfg :button, :secondary, :disable_with, body: 'Click Me!'
disabled:

Used for buttons in a disabled state.

:disabled
= ui.nfg :button, :secondary, :disabled, body: 'Disabled'
href:

Used for adding links to buttons.

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

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

icon: 'caret-right'
= ui.nfg :button, :secondary, body: 'Icon on Right', icon: 'caret-right'
left_icon:

Icons placed to the left of the text.

left_icon: 'caret-left'
= ui.nfg :button, :secondary, body: 'Icon on Left', left_icon: 'caret-left'
method:

For using a delete method.

method: :delete
= ui.nfg :button, :secondary, body: 'Method Delete', method: :delete
remote:

Used for remote forms.

remote: true
= ui.nfg :button, :secondary, body: 'Remote true', remote: true
render_if:

Condition to determine if the button shows or not.

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

Condition to determine if the button shows or not.

render_unless: (1==1)
= ui.nfg :button, :secondary, body: 'Not Rendered', render_unless: (1==1)
size:

Determines the size of the button.

:sm
:lg
= ui.nfg :button, :secondary, :sm, body: 'Small'
submit:

Used for submitting forms.

:submit
= ui.nfg :button, :secondary, :submit, body: 'Submit'
theme:

Determines the theme of the button.

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

Shows a tooltip on button.

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