Buttons

Default button styling

Buttons receive no default styling in Odin, so any custom CSS you write will not conflict with default styling.

Contextual button styles

The visual presentation of buttons can help users complete forms more quickly and minimize the risk of potential errors. Primary actions could be actions such as "submit", "login", "add to cart". Secondary actions could be actions such as "cancel", "go back", or "reset". They are less important, alternative actions, which could have negative consequences if used accidentally. Use the button-primary class on buttons that will perform primary actions and button-secondary on buttons that will perform secondary actions. If desired, override these classes in a secondary stylesheet.

Four additional classes are provided to assist users. The button-info class may be appropriate for buttons that act as a link or open modal windows. Use button-success for actions such as saving a document or creating an account. Use button-warning for actions that potentially have negative consequences that are not severe such as "restore default settings". Use button-danger for actions with severe, perhaps permanent, negative consequences such as "delete file" or "delete account".


<button class="button-primary">Primary</button>
<button class="button-secondary">Secondary</button>
<button class="button-info">Info</button>
<button class="button-success">Success</button>
<button class="button-warning">Warning</button>
<button class="button-danger">Danger</button>

Disabled buttons

Odin buttons with the attribute disabled are washed out slightly.


<button class="button-primary" disabled>Button Text</button>

Button sizes

Two utility classes, button-sm and button-lg allow for buttons of different sizes to be created.

Small button
Large button

  
<a class="button-primary button-sm" href="#">Small button</a>
<a class="button-primary button-lg" href="#">Large button</a>

Buttons with icons

Odin doesn't include icon fonts, but it will work well with existing ones. In the example below, icon fonts from Font Awesome are used. You'll need to make sure that any page using icon fonts loads the necessary CSS.

Checkout Learn more

  
<a class="button-primary" href="#"><i class="fa fa-shopping-cart"></i> Checkout</a>
<a class="button-info" href="#">Learn more <i class="fa fa-chevron-right"></i></a>