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. |
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! |