Components :: Button
Specs
| File Name | class | Source |
|---|---|---|
atom.button.css | .button or .bt | Github |
The button atom uses the .button or its shorthand .bt class. It will render the same on the following HTML elements:
<button><input><a>
You can combine modifiers however you want (see exmamples below) but note that the .bt-outline modifier will only work on buttons that have a solid fill color to start.
| Available modifiers | Style |
|---|---|
.bt | |
.bt + .bt-md | |
.bt + .bt-lg | |
.bt + .bt-primary | |
.bt + .bt-primary + .bt-outline | |
.bt + .bt-yes | |
.bt + .bt-yes + .bt-outline | |
.bt + .bt-maybe + .bt-outline | |
.bt + .bt-maybe | |
.bt + .bt-no | |
.bt + .bt-no + .bt-outline | |
| SVG inline inside button | |
disabled attribute |
Examples
- This is a Link
<a class="bt">This is a Link</a> <button class="bt bt-lg bt-primary" type="button"> <svg>[…]</svg> Large Button with Icon </button><input class="bt bt-md bt-no bt-outline" type="submit" value="Submit Input" />