Version 3.0.6

Buttons

A button clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme. There are four standard types of buttons, each coming in various sizes, loading states, and colors.

Primary Buttons are reserved for the primary action the user can take within a page or modal. Examples include: Save, Create, Delete, Donate.

                      
<button class="btn btn-blue">Save</button>
                      
<button class="btn btn-red">Delete</button>
                      
<button class="btn btn-gray">Preview</button>

Secondary Buttons are lighter but still use color to convey meaning to the user.

  • Use the Red Secondary Button for severe secondary actions such as "Delete," when the action is not the primary action on the page, but will cause a significant effect.
                      
<button class="btn btn-red btn-secondary">Delete</button>

We include default styling for input type=button and related items. Examples included below for testing and reference. You should be using classes listed above.

You can style an a link as a button. Below is an example.

Text buttons are used when displaying a suggested, but not vital, action within a panel. "View All" is used often as a Text button to allow the user to see more info than currently shown within a panel.

                      
<button class="btn btn-link">View All</button>
                      
<button class="btn btn-blue btn-sm">Small</button>
                      
<button class="btn btn-blue">Default</button>
                      
<button class="btn btn-blue btn-lg">Large</button>
                      
<button class="btn btn-blue btn-full">Full-Width</button>
                      
<button class="btn btn-blue">Button</button>

<button class="btn btn-blue btn-loading">
<span class="loading-dot"></span>
<span class="loading-dot"></span>
<span class="loading-dot"></span>
<span class="reader-only">Loading</span>
</button>

<button class="btn btn-blue btn-success">
<span class="glyphicons glyphicons-ok-circle" aria-hidden="true"></span>
<span class="reader-only">Success</span>
</button>
                      
<button class="btn btn-blue">Button</button>

<button class="btn btn-blue btn-loading">Processing</button>

<button class="btn btn-blue btn-success">Success!</button>

Follow buttons let users follow items that are important to them to personalize their experience. Placement and usage should be consistent so the user can anticipate where to find them.

Until popovers are implemented, follow buttons should be surfaced in the first column of tables and to the right of the page title (link to page titles) for any data types that support following.

Tooltips are encouraged to give the user additional information about auto-following. (e.g. "This event has been auto-followed because you created this event.")

                      
<button class="btn btn-blue btn-ghost btn-xs">
<span class="glyphicons glyphicons-plus" aria-hidden="true"></span>Follow
</button>

<button class="btn btn-green btn-xs" uib-tooltip="This event has been auto-followed because you created this event." tooltip-placement="bottom">
<span class="glyphicons glyphicons-ok" aria-hidden="true"></span>Following
</button>

<button class="btn btn-green btn-xs" uib-tooltip="This event has been auto-followed because you created this event." tooltip-placement="bottom">
<span class="glyphicons glyphicons-remove" aria-hidden="true"></span>Unfollow
</button>

Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btn in .btn-group.

                      
<div class="btn-group">
<button class="btn btn-gray">Button 1</button>
<button class="btn btn-gray">Button 2</button>
<button class="btn btn-gray btn-dropdown">
Dropdown
<ul class="dropdown-menu left">
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
</ul>
</button>
</div>

Toggle buttons are best used when settling boolean/checkbox filter options amongst other input fields. They should only be used when there are four or less options available to the user. Five or more options require a multi-select input. For more usage information visit http://getbootstrap.com/javascript/#buttons-checkbox-radio.

If a toggle button is used as a filter item (e.g. in a list or report view), a full button is preferred, to span the width of the grid column. A dynamic width toggle is only used in rare cases, where the layout allows for the component size to grow.

Full-Width

Dynamic-Width

Dynamic-Width & Glyphicons Only

                      
<h3>Full-Width</h3>
<div class="toggle-group">
<input class="input-toggle" type="radio" name="toggle_full_width" id="toggle_full_width_1" />
<label class="btn btn-toggle" for="toggle_full_width_1">Button 1</label>
<input class="input-toggle" type="radio" name="toggle_full_width" id="toggle_full_width_2" />
<label class="btn btn-toggle" for="toggle_full_width_2">Button 2</label>
<input class="input-toggle" type="radio" name="toggle_full_width" id="toggle_full_width_3" />
<label class="btn btn-toggle" for="toggle_full_width_3">Button 3</label>
<input class="input-toggle" type="radio" name="toggle_full_width" id="toggle_full_width_4" />
<label class="btn btn-toggle" for="toggle_full_width_4">Button 4</label>
</div>

<h3>Dynamic-Width</h3>
<div class="toggle-group dynamic-width">
<input class="input-toggle" type="radio" name="toggle_dynamic_width" id="toggle_dynamic_width_1" />
<label class="btn btn-toggle" for="toggle_dynamic_width_1">Button 1</label>
<input class="input-toggle" type="radio" name="toggle_dynamic_width" id="toggle_dynamic_width_2" />
<label class="btn btn-toggle" for="toggle_dynamic_width_2">Button 2</label>
<input class="input-toggle" type="radio" name="toggle_dynamic_width" id="toggle_dynamic_width_3" />
<label class="btn btn-toggle" for="toggle_dynamic_width_3">Button 3</label>
<input class="input-toggle" type="radio" name="toggle_dynamic_width" id="toggle_dynamic_width_4" />
<label class="btn btn-toggle" for="toggle_dynamic_width_4">Button 4</label>
</div>

<h3>Dynamic-Width & Glyphicons Only</h3>
<div class="toggle-group dynamic-width glyphs-only">
<input class="input-toggle" type="radio" name="toggle_dynamic_width2" id="toggle_dynamic_width2_1" />
<label class="btn btn-toggle" for="toggle_dynamic_width2_1">
<span class="glyphicons glyphicons-align-left" aria-hidden="true"></span>
<span class="reader-only">Align Left</span>
</label>
<input class="input-toggle" type="radio" name="toggle_dynamic_width2" id="toggle_dynamic_width2_2" />
<label class="btn btn-toggle" for="toggle_dynamic_width2_2">
<span class="glyphicons glyphicons-align-center" aria-hidden="true"></span>
<span class="reader-only">Align Center</span>
</label>
<input class="input-toggle" type="radio" name="toggle_dynamic_width2" id="toggle_dynamic_width2_3" />
<label class="btn btn-toggle" for="toggle_dynamic_width2_3">
<span class="glyphicons glyphicons-align-right" aria-hidden="true"></span>
<span class="reader-only">Align Right</span>
</label>
</div>
                      
<div class="toggle-group">
<input class="input-toggle" type="checkbox" name="toggle_checkbox" id="toggle_checkbox_1" checked="checked" />
<label class="btn btn-toggle" for="toggle_checkbox_1">Button 1</label>
<input class="input-toggle" type="checkbox" name="toggle_checkbox" id="toggle_checkbox_2" />
<label class="btn btn-toggle" for="toggle_checkbox_2">Button 2</label>
<input class="input-toggle" type="checkbox" name="toggle_checkbox" id="toggle_checkbox_3" />
<label class="btn btn-toggle" for="toggle_checkbox_3">Button 3</label>
</div>
                      
<div class="toggle-group">
<input class="input-toggle" type="radio" name="toggle_radio" id="toggle_radio_1" checked="checked" />
<label class="btn btn-toggle" for="toggle_radio_1">Button 1</label>
<input class="input-toggle" type="radio" name="toggle_radio" id="toggle_radio_2" />
<label class="btn btn-toggle" for="toggle_radio_2">Button 2</label>
<input class="input-toggle" type="radio" name="toggle_radio" id="toggle_radio_3" />
<label class="btn btn-toggle" for="toggle_radio_3">Button 3</label>
</div>

These buttons contain an icon and a short caption, and can be used alone or as part of a button group.

Default Square Button

Large Square Button

Print

Square Button Group

                      
<button class="btn btn-sq">
<span class="glyphicons glyphicons-list"></span>
<span class="icon-label">Form</span>
</button>
<button class="btn btn-sq btn-sq-lg">
<span class="glyphicons glyphicons-list"></span>
<span class="icon-label">Form</span>
</button>
<div class="btn-group">
<button class="btn btn-sq">
<span class="glyphicons glyphicons-floppy-save"></span>
<span class="icon-label">Save</span>
</button>
<button class="btn btn-sq">
<span class="glyphicons glyphicons-print"></span>
<span class="icon-label">Print</span>
</button>
<button class="btn btn-sq">
<span class="glyphicons glyphicons-ban-circle"></span>
<span class="icon-label">Clear</span>
</button>
</div>

Search Results

Powered by