All buttons have four states: Primary, Hover, Active (clicked), and Disabled. Hover over the buttons below (and click!) to see the state changes.
Note, these have very little style assigned to them. Theyre intended to be used as base styles and sizes you can use to style future buttons with.
<button>Base Button</button>
<input type="submit" value="Submit">
<a href="" class="button">Link</a>
<button><a href="">Link in a button</a></button><button class="small">Small</button>
<button>Default</button>
<button class="large">large</button><button class="filled-green">Button</button>
<button class="filled-green" disabled>Button</button><button class="filled-blue">Button</button>
<button class="filled-blue" disabled>Button</button><button class="filled-orange">Button</button>
<button class="filled-orange" disabled>Button</button><button class="filled-red">Button</button>
<button class="filled-red" disabled>Button</button><button class="outlined-green">Button</button>
<button class="outlined-green" disabled>Button</button><button class="outlined-blue">Button</button>
<button class="outlined-blue" disabled>Button</button><button class="outlined-orange">Button</button>
<button class="outlined-orange" disabled>Button</button><button class="outlined-red">Button</button>
<button class="outlined-red" disabled>Button</button><button class="outlined-grey">Button</button>
<button class="outlined-grey" disabled>Button</button><button class="outlined-white">Button</button>
<button class="outlined-white" disabled>Button</button>