Button Grid
A collection of buttons arranged in a grid format.
On this page
When to use
Use a button grid when there are multiple calls-to-action or destinations that are of equal weight or importance.
- When not to use: When there is an important call-to-action that should dominate, use a single prominent button instead. It’s not recommended to use more than four buttons at a time to prevent overwhelming users.
Guidelines
Use a logical grid system, usually 2-4 columns. Buttons should be large enough for touch interaction on mobile (minimum 44x44px).
Accessibility
The color contrast ratio between background color and foreground text needs to be a minimum of 4.5:1. Include focus states that are clearly visible when users navigate with a keyboard. Consider users with motor difficulties by making targets large enough and well-spaced.