The button object
The button object is a simple, robust, extensible baseline for building entire suites of buttons onto.
Install using npm:
$ npm install --save-dev aleut.objects.buttons
Usage
Basic usage of the button object uses the required class:
Button
Options
Other, optional classes can supplement the required base classes:
.o-btn--[small|large]
: Alter the spacing around the button.o-btn--full
: Makes the button full-width.o-btn--pill
: Makes the button pill shaped (i.e. rounded)
For example:
Button with full widthSmall pill-button
Enable options
To enable the optional classes set the variables to true
before you import
the _objects.buttons.scss
-file.
;;;;
Modify styling
To modify the base styling you can change these variables and set them to your preferred options before you import the _objects.buttons.scss
-file.
;;;;;;
If you need more button-alternatives (as you probably do), it's recommended to make your own component (in its own file) that you style and add to the objects. For example:
Button with full width