87 lines
2.4 KiB
JavaScript
87 lines
2.4 KiB
JavaScript
import { h } from 'preact';
|
|
|
|
import './designSystem.scss';
|
|
|
|
storiesOf('Components/HTML/Buttons', module)
|
|
.add('Description', () => (
|
|
<div className="container">
|
|
<h2>Buttons</h2>
|
|
<p>
|
|
Use Danger style only for destructive actions like removing something.
|
|
Do not use it for, for example “unfollow” action.
|
|
</p>
|
|
<p>
|
|
If you have to use several buttons together, keep in mind you should
|
|
always have ONE Primary button. Rest of them should be Secondary and/or
|
|
Outlined and/or Text buttons.
|
|
</p>
|
|
<p>
|
|
It is ok to use ONLY Secondary or outlined button without being
|
|
accompanied by Primary one.
|
|
</p>
|
|
<p>
|
|
For Stacking buttons (vertically or horizontally) please use 8px spacing
|
|
unit for default size buttons (no matter if stacking horizontally or
|
|
vertically).
|
|
</p>
|
|
</div>
|
|
))
|
|
.add('Default', () => (
|
|
<a href="/" className="crayons-btn">
|
|
Button label
|
|
</a>
|
|
))
|
|
.add('Full', () => (
|
|
<a href="/" className="crayons-btn crayons-btn--full">
|
|
Full Button label
|
|
</a>
|
|
))
|
|
.add('Secondary', () => (
|
|
<a href="/" className="crayons-btn crayons-btn--secondary">
|
|
Secondary Button label
|
|
</a>
|
|
))
|
|
.add('Outlined', () => (
|
|
<a href="/" className="crayons-btn crayons-btn--outlined">
|
|
Outlined Button label
|
|
</a>
|
|
))
|
|
.add('Text', () => (
|
|
<a href="/" className="crayons-btn crayons-btn--text">
|
|
Text Button label
|
|
</a>
|
|
))
|
|
.add('Danger', () => (
|
|
<a href="/" className="crayons-btn crayons-btn--danger">
|
|
Danger Button label
|
|
</a>
|
|
))
|
|
.add('Icon Left', () => (
|
|
<a href="/" className="crayons-btn crayons-btn--icon-left">
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="crayons-icon"
|
|
>
|
|
<path d="M9.99999 15.172L19.192 5.979L20.607 7.393L9.99999 18L3.63599 11.636L5.04999 10.222L9.99999 15.172Z" />
|
|
</svg>
|
|
Button
|
|
</a>
|
|
))
|
|
.add('Secondary/Full/Icon Left', () => (
|
|
<a
|
|
href="/"
|
|
className="crayons-btn crayons-btn--secondary crayons-btn--full crayons-btn--icon-left"
|
|
>
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="crayons-icon"
|
|
>
|
|
<path d="M9.99999 15.172L19.192 5.979L20.607 7.393L9.99999 18L3.63599 11.636L5.04999 10.222L9.99999 15.172Z" />
|
|
</svg>
|
|
Button
|
|
</a>
|
|
));
|