Awesomeness

Buttons

Button Types

Buttons can be used in many different places. They are useful for forms or to indicate important actions. You can use them by adding the .btn to your links. You can give them even more meaning by using a predefined btn class like .btn--primary, .btn--success, .btn--destroy, .btn--disabled or .btn--with-icon

Example

Generic Primary Save Delete Disabled Icon

Imports

  • SASS:
    @import "base";
@import "imports/modules/button";

Code

<a class="btn" href="#">Generic</a>
<a class="btn btn--primary" href="#">Primary</a>
<a class="btn btn--success" href="#">Success</a>
<a class="btn btn--destroy" href="#">Delete</a>
<a class="btn btn--disabled" href="#">Disabled</a>
<a class="btn btn--with-icon" href="#"><i class="fa fa-shopping-cart"></i> Icon</a>

Button Sizes

Buttons can also come in different sizes. To apply another button sizes just add the classes .btn--large and .btn--huge

Example

Normal Large Huge

Imports

  • SASS:
    @import "base";
@import "imports/modules/button";

Code

<a class="btn btn--large" href="#">Large</a>
<a class="btn btn--huge space-lover--huge" href="#">Huge</a>

Button Group

Buttons can also be grouped to indicate tab like behaviour. This can be especially usefull in Webapps. Group them by using a div wrapper with the class .btn--group and giving each Button the class .btn--in-group

Example

One Two Three

Imports

  • SASS:
    @import "base";
@import "imports/modules/button";

Code

<div class="btn-group cf">
	<a class="btn-group__btn" href="">One</a>
	<a class="btn-group__btn" href="">Two</a>
	<a class="btn-group__btn" href="">Three</a>
</div>

Button Dropdown

Dropdown Menus can be very difficult to style, so we include our own button dropdown. Each dropdown needs a link with the data-toggle to toggle the menu. The Menu itself consists of an unordered list with the class .btn-dropdown__menu and list-items with the class .btn-dropdown__item

Example

Coffee

Imports

  • SASS:
    @import "base";
@import "imports/modules/button";
  • Javascript:
    require(["dropdown"]);

Code

<div class="btn-dropdown">
	<a class="btn-dropdown__toggle" id="drop" role="button" data-toggle="dropdown" href="#">Coffee <i class="fa fa-caret-down"></i></a>
	<ul class="btn-dropdown__menu" role="menu" aria-labelledby="drop">
		<li role="menuitem"><a href="#">Espresso</a></li>
		<li role="menuitem"><a href="#">Cappuccino</a></li>
		<li role="menuitem"><a href="#">Caffè Macchiato</a></li>
		<li role="menuitem"><a href="#">Latte Macchiato</a></li>
	</ul>
</div>