Button Row

What It Is

Button rows organize one or more button elements that initiate actions from HTML pages. Button rows are comprised of the following elements:

  • A wrapping div that right-aligns all child buttons and encloses them with a top and bottom border
  • One or more buttons arranged in a row

When to Use

Button rows must always wrap any button elements that appear on application pages. If a button should initially be displayed in a disabled state, apply the .buttonDisabled class (see example HTML snippet).

Fireman's Fund Usage Guidelines

The following general guidelines should be followed when creating button rows:

  • If multiple buttons are presented, the default or most important action should be placed at the far right of the row.
  • Buttons are created by assigning the button class to an HTML input element.
  • Disabled buttons are created by assigning the buttonDisabled class to an HTML input element.

Is This the Right Control?

The following guidelines come from the Microsoft UX Guide:

  • Is the command button used to initiate an immediate action? If not, use another control.
  • Would a link be a better choice? Use a link if:
    • The action is to navigate to another page, window, or Help topic. Exception: Wizard navigation uses Back and Next command buttons.
    • The command is embedded in a body of text.
    • 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.
    • The command is part of a menu or group of related links.
    • The label is lengthy, consisting of five or more words, thus giving a command button an awkward appearance.
  • Would a combination of radio buttons and generic command buttons be a better choice? Often radio buttons are used in conjunction with generic command buttons (OK, Cancel) in place of a set of specific command buttons when any of the following are true:
    • 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.