component
Button bar
A container for buttons, links, and calls-to-action.
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.