3.3.2 atoms.button.style Button styles

Toggle example guides Toggle HTML markup

There are different types of buttons that can be used.

  • Default button: Rectangular shaped buttons that is used in most cases. Does not lift (on same layer as the parent element) and should be placed cards.
  • Flat button: Are text-only buttons. They should always have a color to distinguish them from normal text. They can be used to put less emphasis or visual attraction to the action. They may be used in dialogs, toolbars, or inline. They do not lift, but fill with color on press.
  • Raised button: Rectangular-shaped buttons that behave like a piece of material resting on another sheet – they lift and fill with color on press. Raised buttons add dimension to mostly flat layouts. They emphasize functions on busy or wide spaces. They may be used inline. They lift and display ink reactions on press.
  • Floating action button: A circular button that lifts. A floating action button is used for page-wide actions.

    Guidelines

In the overview above we have listed many options which you can use to style a button. For consistency we recommend the following:

  • Start with a default button style and type.
  • Is your button next (left, right, below) to a card? Consider making it a raised button to put it on the same elevation level as the card.
  • Does the button need to be one level higher then card content in terms of elevation? Then make it a floating button. This usually means that there is no direct relationship with a specific card or section, but the page as a whole. An example for this would be to edit a node, where this button to do this is put in a block, but you are not only editing the block but the whole node.
  • Only when a button needs more emphasis use the primary style, or even the accent style. Per form or set of buttons you only want one emphasized button and this should be the preferred action in any context.
  • If you want to button to be less visible/prominent you can use a flat button style. You can combine this with a smaller size of course. This is mostly used when buttons are repeated on a page or you have limited space and other elements need more attention.
  • The succes, warning and danger buttons are inhereted from the bootstrap framework and aren't used in the default style. You can use them however if you indicate positive action, negative action or caution when interaction with the button.
Examples
.btn-primary
Primary style
.btn-accent
Accent style
.btn-default
Default style
.btn-flat
Flat style
Markup: 02-atoms/button/button.twig
<button class="btn {{modifier_class}}">Button</button>
Source: 02-atoms/button/button.scss, line 3