component

Button bar

A container for buttons, links, and calls-to-action.

Design Complete

Default
Slim
Slim, left aligned
Split

Usability

When to use
  • Use at the bottom of forms to demarcate the end of the form and highlight the call to action (save, update, next, etc.).
  • Use the default variation to associate two buttons together (previous/next, save/cancel, etc.).
  • Use the slim variation when there is only one button.
  • Use the slim, left-aligned variation in edge cases when there is only one button and content is weighted towards the left. The button bar doesn't always adhere to the input max-width and thus can float far to the right, potentially creating issues for users pointing to the right-aligned button (See Fitts's Law).

    Do not use this variation if using the other button-bar variations within a flow. Using this variation is allowed at the start or end of a flow, however don't switch variations mid-stream.