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.

Span A Link Span A Link

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

Button group is deprecated. Please use input group instead!

Block buttons

This is a block button.

Buttons with icons

For inline images the use of jinja is recommended.