Buttons look similar to the material design ones. They support various colors and an
<a href="#" class="red button">red button</a> <a href="#" class="inverted deep orange button">deep orange button with white background</a>
Ranges support colors and a disabled state:
<input type="range" disabled> <input type="range" class="teal range">
Floating text/password/number inputs
Inputs can have a floating label, and also support colors:
<div class="teal floating label input"> <input type="text" placeholder="e.g. 12345"> <label>ZIP code</label> </div>
In order to let the label float around, you will need to provide a placeholder. The inputs use the
:placeholder-shown selector internally to decide whether to float or not to float (that's because we don't have a
:dirty selector yet, and marking fields as
required can break form UX with optional fields).
- Download a release
- Clone the repository
- then run
yarn installto install the dependencies
yarn buildto build the components
yarn startto start a development server
- then run
Bugs and feature requests
Remember that this project is an extension to an experiment, so there's no guarantee it will actually work in production. If you find a bug or you have an idea of how to improve batteries-components, just file a new issue.
All code in this repository is released under the MIT license.