Buttons

Download

You can fetch Trowel Buttons with npm, yarn or bower.

# With bower
$ bower install --save trowel-buttons

# With npm
$ npm install --save trowel-buttons

# With yarn
$ yarn add trowel-buttons

You can also download a zip archive right here.

Installation

SCSS

The main scss file to include to your main .scss file is located at the ./src/scss/buttons.scss. As a Trowel Component, it also requires two dependencies to compile the scss code. Here an scss installation snippet.

// Trowel core (need to be imported first)
@import './path/to/dependencies/trowel-core/src/trowel';

// Trowel Component Buttons
@import './path/to/dependencies/trowel-buttons/src/scss/buttons';

Usage

Tags

You can put the .btn classes <a>, <button> and <input> DOM elements.

<a class="btn btn--default" href="#" role="button">Link</a>
<button class="btn btn--default" type="submit">Button</button>
<input class="btn btn--default" type="button" value="Input">
<input class="btn btn--default" type="submit" value="Submit">

Sizes

By default you have 4 sizes availables :

Here, the sizes are just made with the `$button--font-size` variable : we create a default value, and 3 modifiers flags value. Padding are made with `em` units, so it scales to the font-size value.

  <button class="btn btn--default btn--lg">button lg</button>
  <button class="btn btn--default">button md</button>
  <button class="btn btn--default btn--sm">button sm</button>
  <button class="btn btn--default btn--xs">button xs</button>

Themes

By default you have 6 different themes for the .btn.

The themes are designed with the variables $button--color, $button--border-color and $button--background-color.

<button class="btn btn--default">default</button>
<button class="btn btn--primary">primary</button>
<button class="btn btn--success">success</button>
<button class="btn btn--warning">warning</button>
<button class="btn btn--danger">danger</button>
<button class="btn btn--link">link</button>

Block

You can make the button size equal to its container size with the .btn--block class.

this class is designed with a modifier flag on two trowel variables : ` $button--display` as `block`, and `$button--width` as `100%`.

<button class="btn btn--primary btn--block">btn block</button>

Btn group

You can group button by just wrapping them in a .btn-group DOM element

The btn-group is design with flexbox. Check out the btn-groups variables to custom its behavior.

<div class="btn-group">
  <button class="btn btn--default">first button</button>
  <button class="btn btn--default">second button</button>
  <button class="btn btn--default">third button</button>
</div>

Sass reference

Syntax variables

You can override the global syntax config for a specific component with the following variables

Enables

You can avoid the generation of some css with the following variables

Component variables

Btn-groups