# rocket-button
> A lightweight button module.
Latest version **6.2.1** (published 2018-01-18) · Apache-2.0 license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install rocket-button
pnpm add rocket-button
yarn add rocket-button
bun add rocket-button
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 6.2.1 |
| Published | 2018-01-18 |
| First published | 2016-11-08 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Chris Humboldt |
| Maintainers | chrishumboldt |
| Keywords | Rocket, Part, Module, Button, Javascript, SASS, CSS |
## Links
- npm: https://www.npmjs.com/package/rocket-button
- Repository: https://github.com/chrishumboldt/Rocket-Button
- Homepage: https://github.com/chrishumboldt/Rocket-Button#readme
- Issues: https://github.com/chrishumboldt/Rocket-Button/issues
- npm.io page: https://npm.io/package/rocket-button
## Dependencies (2)
- [rocket-tools](https://npm.io/package/rocket-tools.md) ^1.16.0
- [rocket-propel](https://npm.io/package/rocket-propel.md) ^3.1.1
## Alternatives
- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads
## Recent versions
- 6.2.1 (latest) — 2018-01-18
- 6.2.0 — 2018-01-16
- 6.1.1 — 2018-01-16
- 6.1.0 — 2017-12-11
- 6.0.0 — 2017-11-24
- 5.1.9 — 2017-04-21
- 5.1.8 — 2017-02-16
- 5.1.7 — 2017-02-16
- 5.1.6 — 2017-02-15
- 5.1.5 — 2017-02-15
- 5.1.4 — 2017-02-15
- 5.1.3 — 2017-02-15
- 5.1.2 — 2017-02-15
- 5.1.1 — 2017-01-17
- 5.1.0 — 2017-01-17
- … 11 more at https://npm.io/package/rocket-button/versions
## README
# Rocket Button
A lightweight button module.
* [Getting Started](#getting-started)
* [CSS Implementation](#css-implementation)
* [SASS Implementation](#sass-implementation)
* [Javascript Initialisation](#javascript-initialisation)
* [Loader Options](#loader-options)
* [Defaults](#defaults)
* [Buttonplate Deprecated](#buttonplate-deprecated)
## Getting Started
Install via NPM.
```
npm install rocket-button
```
**NOTE** that this module has a dependency [Rocket Tools (28kb)](https://github.com/chrishumboldt/Rocket-Tools) which will automatically be installed as well.
## CSS Implementation
Start by including the necessary files.
```html
```
Now class your button and add a modifier to gain the desired effect. For example:
```html
```
There are a variety of options for the CSS modifiers.
Class | Options | Description
---- | ---- | ----
`_mod-style-flat-(x)` | `white` `grey` `black` `aqua` `blue` `green` `orange` `pink` `purple` `red` `yellow` | Set the colour and style to flat.
`_mod-style-gradient-(x)` | `white` `grey` `black` `aqua` `blue` `green` `orange` `pink` `purple` `red` `yellow` | Set the colour and style to gradient.
`_mod-style-line-(x)` | `white` `grey` `black` `aqua` `blue` `green` `orange` `pink` `purple` `red` `yellow` | Set the colour and style to line.
`_mod-size-(x)` | `small` `normal` `large` `x-large` | Set the size of the the button.
`_mod-shape-(x)` | `rounded` `pill` `square` | Set the shape of the the button.
If no modifiers are provided then the colour will default to grey, the style to flat, the size to normal and the shape to rounded.
## SASS Implementation
Instead of including the CSS file above, you can import the SASS file and create your own button styles. See an example below:
```scss
@import "node_modules/rocket-button/build/sass/import";
.btn-primary,
.btn-secondary {
@include mod-button-setup;
@include mod-button-shape(rounded);
@include mod-button-size(normal);
}
.btn-primary {
@include mod-button-style(line, black);
@include mod-button-size(large);
}
.btn-secondary {
@include mod-button-style(flat, white);
}
```
There are a variety of options for the SASS builds.
SASS | Default | Options | Description
---- | ---- | ---- | ----
`mod-button-setup` | | | Apply to all buttons.
`mod-button-shape(x)` | `rounded` | `pill` `rounded` `square` | Set the shape of the button.
`mod-button-size(x)` | `normal` | `small` `normal` `large` `x-large` | Set the size of the button.
`mod-button-style(x, y)` | `flat`, `white` | `flat` `gradient` `line` | Set `x` to the style of button. Set `y` to the colour.
`mod-button-css(x)` | `.mod-button` | | Create styles for selector `x`.
## Javascript Initialisation
If you want to enable button loaders or dropdowns then you will need to execute the following Javascript. Start by including the necessary files. By default the dropdown target option is set to **.mod-button**.
```html
```
The button loader returns the element instance. You can modify the loader after that.
```javascript
// Start the button loader
const btnLoader = Rocket.button.loader({
target: '#button-loader'
});
// The button element
Rocket.log(btnLoader.button);
// Hide the loader
setTimeout(function () {
btnLoader.hide();
}, 4000);
```
Each dropdown initialisation will return an array of module objects (An array will always be returned even if the target is an id). This includes the button element itself as well as relevant methods. For example:
```javascript
// By default the target option is set to '.mod-button'
const buttons = Rocket.button.dropdown();
// The buttons and all methods
for (let i = 0, len = buttons.length; i < len; i++) {
console.log(buttons[i].button);
buttons[i].show(); // Show the button dropdown
buttons[i].hide(); // Hide the button dropdown
}
```
Alternatively if you know the button target is unique you can reference the button right away with the 0 index. For example:
```javascript
const myButton = Rocket.button.dropdown({
target: '#my-button'
})[0]; // Reference the first item in the array right away.
```
#### Loader Options
Name | Default | Options | Description
---- | ---- | ---- | ----
`element` | | | Provide the button element to attach the loader to.
`parseEvent` | | | Parse a click event to prevent the default action.
`reveal` | `appear` | `appear` `slide-down` `slide-up` | Set the loader reveal.
`timeout` | `0` | | Set the timeout of the loader (in seconds). `0` is infinite.
#### Defaults
You can also overwrite the module target option globally by altering the Rocket defaults. To do so reference the defaults object property, for example:
```javascript
Rocket.defaults.button.loader.reveal = 'slide-up';
Rocket.defaults.button.dropdown.target = '.new-button-class';
```
## Buttonplate Deprecated
The original library, Buttonplate, has been deprecated. The entire Webplate project is being refactored and rebranded with a new development philosophy. Buttonplate will be maintained only with bug fixes under the **buttonplate** branch.
## Author
Created and maintained by Chris Humboldt
Website: chrishumboldt.com
Twitter: twitter.com/chrishumboldt
GitHub github.com/chrishumboldt
## Copyright and License
Copyright 2018 Rocket Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
---
_Source: https://npm.io/package/rocket-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._