Buttons

Use when

You want to express an immediate action. A button consists of text or an icon (or both text and an icon) that communicates what action occurs when the user clicks it.

Example

Recommendations

• Decide if a button is a right control to use. Buttons should be used to initiate immediate action. Do not use a button:
  • To navigate to another page, window, or Help topic. (Exception: Wizard navigation uses Back and Next command buttons.)
  • If the command is embedded in a body of text.
  • If the command is secondary in nature. That is, it does not relate to the primary purpose of the window. In this case, either a lightweight command button or link would be appropriate.
  • If the command is part of a menu or group of related links.
  • If the label is lengthy, consisting of five or more words, thus giving a command button an awkward appearance.
• Choose the right button style:
  • Choose a button style depending on the primacy of the button, the number of containers on the screen, and the screen layout.
  • Choose a raised or flat button depending on the container it will be in and depending on the number of z-space layers you have on the screen.
  • Use primarily one type of button per container. Only mix button types when you have a good reason to, such as emphasizing an important function.
  • Use the #button_type property to add the styling for the buttons. Available button types are primary and dangerous.
    • Use primary only for a button that truly completes the form submission.

    • Use danger only for a destructive button if it appears as an alternative option within a set of other buttons.

• Determine if you should use radio buttons in conjunction with generic command buttons. Use radio buttons if:
  • There are five or more possible actions.
  • Users need to view additional information before making a decision.
  • Users need to interact with the choices (perhaps to see additional information) before making a decision.
  • Users view the choices as options instead of different commands.

API

Drupal 10, Drupal 9, Drupal 8.9, Drupal 7, Drupal 6

Problem it solves

A button highlights important actions that can take place like submitting a form, editing a page, or clicking through to a point of interest.