warning

Hey there! This is the Uniform version 3 documentation site. If you’re looking for version 4, go here instead.

logomark

Components

February 2020 Release

/

Button Row

Design
Code
keyboardshortcuts
d
Design
c
Code
,
Previous Section
.
Next Section
/
Toggle Preview Environment
[
Previous Platform
]
Next Platform
command + ↑
Scroll to Top
command + ↓
Scroll to Bottom

Wrap a group of buttons with identical space between each.

The button row automatically spaces a group of related buttons with consistent margins.

Space

Our space scale is based on a 16px unit. When creating a button row, margin sizes can range from one-eighth (2px) to four full spaces.

Usage

Button Types

buttonrow-buttontypes-dont

Don'tmix and match button sizes, styles and types in a single row.

buttonrow-buttontypes-do

Domake the buttons as similar as possible—this includes text length.

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.
No guidelines exist for Windows (yet).