Button

Easily create nicely looking buttons, which come in different styles.

Usage

To apply this component, add the .f-btn class to an <a> or <button> element. Now you have created a button. Add the disabled attribute to a <button> element to disable the button.

Example

Link

Markup

<a class="f-btn" href="">...</a>
<button class="f-btn">...</button>
<button class="f-btn" disabled>...</button>

NOTE If you are displaying a number of buttons in a row, you can add a top margin to them, when they stack on smaller viewports. Just add the data-f-margin attribute from the Utility component to their parent element.


Color modifiers

There are several color modifiers available. Just add one of the following classes to apply a different look.

Example Class Description
.f-btn-primary Emphasizes to identify the primary action in a set of buttons.
.f-btn-success Indicates a successful or positive action.
.f-btn-warning Indicates a warning or neutral action.
.f-btn-danger Indicates a dangerous or negative action.
Link .f-btn-link Deemphasizes to look like a link while maintaining button behavior.

NOTE More button colour options can be created easily in /assets/styles/base/_variables.scss by editing the $button-colors variable.

Size modifiers

Add the .f-btn-mini, .f-btn-small or .f-btn-large class to a button to make it smaller or larger.


Full width button

Add the .f-width-1-1 class from the Grid component and the button will take up full width.

Example

Markup

<button class="f-btn f-width-1-1 f-margin-small-bottom">...</button>
<button class="f-btn f-width-1-1">...</button>

Button group

To create a button group, add the .f-btn-group class to a <div> element around the buttons. That's it! No further markup needed.

Example

Link
Link
Link
Link

Markup

<div class="f-btn-group">
	<a class="f-btn" href="">...</a>
	<button class="f-btn">...</button>
	<button class="f-btn">...</button>
</div>

JavaScript

You can toggle button states via JavaScript. Just add the data attibute data-f-btn.

Example

Markup

<button class="f-btn f-btn-primary" data-f-btn>Button</button>

Checkbox buttons

Toggle between a group of buttons like a checkbox by wrapping a <div> element with the data attribute data-f-btn-checkbox around them. This can also be applied to a button group.

Example

Markup

<div data-f-btn-checkbox>
	<button class="f-btn">...</button>
	<button class="f-btn">...</button>
	<button class="f-btn">...</button>
</div>

Radio buttons

Toggle between a group of buttons, like radio buttons, by wrapping a div element that uses data-f-btn-radio around them. This can also be applied to a button group.

Example

Markup

<div data-f-btn-radio>
	<button class="f-btn">...</button>
	<button class="f-btn">...</button>
	<button class="f-btn">...</button>
</div>

Button with dropdowns

A button can be used to trigger a dropdown menu from the Dropdown component. Just add the .f-btn-dropdown class and the data-f-dropdown attribute to a <div> element that contains the button and the dropdown itself.

Example

Markup

<!-- This is the container enabling the JavaScript -->
<div class="f-btn-dropdown" data-f-dropdown>

	<!-- This is the button toggling the dropdown -->
	<button class="f-btn">...</button>

	<!-- This is the dropdown -->
	<div class="f-dropdown f-dropdown-small">
		<ul class="f-nav f-nav-dropdown">
			<li><a href="">...</a></li>
			<li><a href="">...</a></li>
		</ul>
	</div>

</div>

Button group with dropdowns

Use button groups to split buttons into a standard action on the left and a dropdown toggle on the right. Just wrap a <div> element around the button and the dropdown and add the data-f-dropdown="{mode:'click'}" attribute. Of course, a dropdown can also be applied to a button within a button group.

Note: you will need to add an extra class of .f-btn-caret to the dropdown icon due to the way Material Icons work.

Example

Markup

<div class="f-btn-group">

	<!-- This is a button -->
	<button class="f-btn">...</button>

	<!-- This is the container enabling the JavaScript -->
	<div data-f-dropdown="{mode:'click'}">

		<!-- This is the button toggling the dropdown -->
		<a href="" class="f-btn f-btn-caret">...</a>

		<!-- This is the dropdown -->
		<div class="f-dropdown f-dropdown-small">
			<ul class="f-nav f-nav-dropdown">
				<li><a href="">...</a></li>
				<li><a href="">...</a></li>
			</ul>
		</div>

	</div>
</div>