github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/stories/components/buttons.stories.js (about) 1 import hbs from 'htmlbars-inline-precompile'; 2 3 export default { 4 title: 'Components|Buttons', 5 }; 6 7 export let Standard = () => { 8 return { 9 template: hbs` 10 <h5 class="title is-5">Buttons</h5> 11 <div class="block"> 12 <a class="button">Button</a> 13 <a class="button is-white">White</a> 14 <a class="button is-light">Light</a> 15 <a class="button is-dark">Dark</a> 16 <a class="button is-black">Black</a> 17 <a class="button is-link">Link</a> 18 </div> 19 <div class="block"> 20 <a class="button is-primary">Primary</a> 21 <a class="button is-info">Info</a> 22 <a class="button is-success">Success</a> 23 <a class="button is-warning">Warning</a> 24 <a class="button is-danger">Danger</a> 25 </div> 26 `, 27 }; 28 }; 29 30 export let Outline = () => { 31 return { 32 template: hbs` 33 <h5 class="title is-5">Outline buttons</h5> 34 <div class="block"> 35 <a class="button is-outlined">Outlined</a> 36 <a class="button is-primary is-outlined">Primary</a> 37 <a class="button is-info is-outlined">Info</a> 38 <a class="button is-success is-outlined">Success</a> 39 <a class="button is-warning is-outlined">Warning</a> 40 <a class="button is-danger is-outlined is-important">Danger</a> 41 </div> 42 `, 43 }; 44 }; 45 46 export let Hollow = () => { 47 return { 48 template: hbs` 49 <h5 class="title is-5">Hollow buttons</h5> 50 <div class="block" style="background:#25BA81; padding:30px"> 51 <a class="button is-primary is-inverted is-outlined">Primary</a> 52 <a class="button is-info is-inverted is-outlined">Info</a> 53 <a class="button is-success is-inverted is-outlined">Success</a> 54 <a class="button is-warning is-inverted is-outlined">Warning</a> 55 <a class="button is-danger is-inverted is-outlined">Danger</a> 56 </div> 57 `, 58 }; 59 }; 60 61 export let Sizes = () => { 62 return { 63 template: hbs` 64 <h5 class="title is-5">Button sizes</h5> 65 <div class="block"> 66 <a class="button is-small">Small</a> 67 <a class="button">Normal</a> 68 <a class="button is-medium">Medium</a> 69 <a class="button is-large">Large</a> 70 </div> 71 `, 72 }; 73 }; 74 75 export let Disabled = () => { 76 return { 77 template: hbs` 78 <h5 class="title is-5">Anchor elements as buttons</h5> 79 <div class="block"> 80 <a class="button is-disabled">Button</a> 81 <a class="button is-white is-disabled">White</a> 82 <a class="button is-light is-disabled">Light</a> 83 <a class="button is-dark is-disabled">Dark</a> 84 <a class="button is-black is-disabled">Black</a> 85 <a class="button is-link is-disabled">Link</a> 86 </div> 87 <div class="block"> 88 <a class="button is-primary is-disabled">Primary</a> 89 <a class="button is-info is-disabled">Info</a> 90 <a class="button is-success is-disabled">Success</a> 91 <a class="button is-warning is-disabled">Warning</a> 92 <a class="button is-danger is-disabled">Danger</a> 93 </div> 94 95 <h5 class="title is-5">Button elements with <code>disabled</code> attribute</h5> 96 <div class="block"> 97 <button class="button is-disabled" disabled>Button</button> 98 <button class="button is-white is-disabled" disabled>White</button> 99 <button class="button is-light is-disabled" disabled>Light</button> 100 <button class="button is-dark is-disabled" disabled>Dark</button> 101 <button class="button is-black is-disabled" disabled>Black</button> 102 <button class="button is-link is-disabled" disabled>Link</button> 103 </div> 104 <div class="block"> 105 <button class="button is-primary is-disabled" disabled>Primary</button> 106 <button class="button is-info is-disabled" disabled>Info</button> 107 <button class="button is-success is-disabled" disabled>Success</button> 108 <button class="button is-warning is-disabled" disabled>Warning</button> 109 <button class="button is-danger is-disabled" disabled>Danger</button> 110 </div> 111 112 <h5 class="title is-5">Button elements with <code>aria-disabled="true"</code></h5> 113 <div class="block"> 114 <button class="button is-disabled" aria-disabled="true">Button</button> 115 <button class="button is-white is-disabled" aria-disabled="true">White</button> 116 <button class="button is-light is-disabled" aria-disabled="true">Light</button> 117 <button class="button is-dark is-disabled" aria-disabled="true">Dark</button> 118 <button class="button is-black is-disabled" aria-disabled="true">Black</button> 119 <button class="button is-link is-disabled" aria-disabled="true">Link</button> 120 </div> 121 <div class="block"> 122 <button class="button is-primary is-disabled" aria-disabled="true">Primary</button> 123 <button class="button is-info is-disabled" aria-disabled="true">Info</button> 124 <button class="button is-success is-disabled" aria-disabled="true">Success</button> 125 <button class="button is-warning is-disabled" aria-disabled="true">Warning</button> 126 <button class="button is-danger is-disabled" aria-disabled="true">Danger</button> 127 </div> 128 `, 129 }; 130 };