Buttons

Types

You can turn any of these elements into a button: button, a, span, div, although for the sake of semantics and sanity, the <button> and <a> elements should be used.

Here is a quick example of buttons:

Button Classes Description
NA Your default button, provided by the browser
.button Aegis's default button style
.button.primary For the main action on your forms.
.button.alert Reserve these for negative actions, such as deletion.
.button.neutral These are used for buttons which denote non-primary actions.
.button.disabled Use for disabled actions
.button.important Highlight Use for the primary action on your page. Use the highlight buttons judiciously, as a lot of them may make users unnecessarily lose focus from your content.
.button.hazard Highlight Use for very important negative actions, such as deletion or account deactivation, etc.
.button.accent Highlight Use for buttons which are not the primary action of your form.

Sizes

Although the button provided above should cover 95% of the cases, sometimes you may find these classes don't fit your needs perfectly. So, here are some variations in buttons we have included. You can make more variations by mixing the colour classes with these.

Button Classes Description
.button.icon-hold Useful for having a button with an icon, or an icon with a button.
.button.inline Useful when you may need a button inline. They can change height depending upon where they are used.
.button.titan Make a mega-monstrous button.
.button.round Break the rectangularity, and get a rounded one!

Supported Tags

Officially, we support the following tags which can be turned into buttons:

Anchors Spans
Divs
<button class="button important">Buttons</button>
<input type="button" class="button accent" value='Inputs'>
<a class="button primary">Anchors</a>
<span class="button accent">Spans</span>
<div class="button hazard">DIVs</div>