Use the button classes on an <a>, <button>, or <input> element. Use logical elements for your buttons. If it is not a link do not use an a but a <button> tag instead. If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

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.
Default button
Flat button
Raised button
Floating button

Use the following styles to determine importance of a button. The success, danger, warning button styles from botstrap are available in the theme, but aren't used in this design.

  1. Accent: For the actions that a community want to motivate users do. This button has most contrast to the brand color of the site. Therefore they really stand out. Examples: Enroll to an event, follow a person, join a group.
  2. Primary: Provides extra visual weight and identifies the primary action in a set of buttons. This style can used for actions that are the most relevant to the current page. For example to save a node form or to create content.
  3. Default: Standard buttons.
  4. Flat: Deemphasize a button by making it look like a link while maintaining button behavior

Default button styles

Raised button styles

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

Define a different button size with .btn-lg, .btn-sm, or .btn-xs.

By default use the default size. You can choose to use a large button if the action really needs to catch the user`s attention. Combine this with a primary or accent style as well to get maximum exposure. Do not mix different button sizes in a set of buttons. If the information density in a block or section is high and you need to make up space you can choose a smaller button size. An example of this are buttons that appear in repetetive blocks.

Default button sizes

Flat button sizes

Raised button sizes

 

Floating action button sizes

In the examples below you can see how styling is applied when a button is active or disabled compared to the default state. For devices that have mouse interaction you can hover and find that state as well. These aren't available for touch devices.

Default states

Flat button states

Raised button states

Floating action button states