Buttons
A simple button with a complex feature set
Buttons are used for actions, like in forms. Buttons can contain text and icons. They often start or finish actions, open links or dialogs so the user can complete a task.
Configure a primary button the user is likely to select as the default. A primary button is prominent in appearance. There can only be a single primary button in a view.
Use the standard .btn for form actions and common page actions. These are used extensively around any site.
When using a button element, always specify a type. When using a a element, always add role="button" for accessibility.
Colorized and inverted buttons are a way to enhance generic buttons — they can be used to style primary, edit and other special buttons. Some examples are prepared below.
Source Code
To initialize the buttons on this site we used this piece of less.
/* enable .btn */
.btn {
.genericBtn();
&--primary {
.colorizeBtn(@successColor);
}
&--danger {
.invertColorizedBtn(@failColor);
}
&--edit {
.invertColorizedBtn(@hintColor);
}
}
Default buttons
This is a standard button. It is rendered the same way on every tag.
Be accessible!
It is recommended to use the button element whenever possible.
For further information please read the
Notes on Using ARIA in HTML.
Primary buttons
This is a primary button.
Danger buttons
This is a danger button.
Edit buttons
This is an edit button.
Disabled buttons
These are disabled buttons.
Button group
Block buttons
This is a block button.
Buttons with icons
For inline images the use of jinja is recommended.