3.3.1 atoms.button.type Button types

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.
Default button
Link button
Raised button
Markup: 02-atoms/button/button.twig
<button class="btn {{modifier_class}}">Button</button>
Source: 02-atoms/button/button.scss, line 19