A button is an interactive element used to trigger an action.
<button type="button" class="o-button">Primary</button>
<button type="button" class="o-button o-button--secondary">Secondary</button>
Out of the box buttons are displayed in basic size. Add a .o-button--small
or .o-button--large
class to change sizes.
<button type="button" class="o-button o-button--large">
Large
</button>
<button type="button" class="o-button">
Regular
</button>
<button type="button" class="o-button o-button--small">
Small
</button>
To make a button horizontally fit inside it's parent element add a .o-button--wide
class to it. Buttons of any size and types can be wide.
<button type="button" class="o-button o-button--large o-button--wide">Continue<i class="o-icon-arrow-right"></i></button>
<button type="button" class="o-button o-button--basic">Primary basic</button>
<button type="button" class="o-button o-button--secondary o-button--basic">Secondary basic</button>
Icon only
With an icon
<button type="button" class="o-button o-button--icon-only"><i class="o-icon-remove"></i></button>
<button type="button" class="o-button">Continue<i class="o-icon-arrow-right"></i></button>
<button type="button" class="o-button" disabled="disabled">Can't touch this</button>
<button type="button" class="o-button o-button--color-{color}">Button</button>
<button type="button" class="o-button o-button--color-{color} o-button--{role}">Button</button>
<button type="button" class="o-button o-button--color-{color} o-button--inverted">Button</button>
<button type="button" class="o-button o-button--color-{color} o-button--{role} o-button--inverted">Button</button>
Attribute | Description | Possible values | Type | Required | Default |
---|---|---|---|---|---|
role | Set with .o-button--{role} class | primary , secondary or basic | String | - | primary |
icon | Add an icon to a button like .o-icon-{icon-name} | See Icons page | String | - | - |
color | Set with .o-button--color-{color} | See Colors page | String | - | primary |
size | Set with .o-button--{size} | small , large | String | - | regular |
wide | Make a button of any size horizontally fit inside it's parent element. Set with .o-button--wide | wide | String | - | - |
invert | Invert a button so it can be placed on a solid color background. Set with .o-button--inverted | inverted | String | - | - |
Made at Fomo