Button Group

A button group is a set of buttons arranged together, typically sharing a common action or category.

Base Components

Overview

A button group is a set of buttons arranged together for related actions.
https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FGl3138LYJ71TKOZEC0F8nJ%2FShipfaster-UI---v2.7.1-(LIVE)%3Fnode-id%3D6-21%26t%3DpA8X0YmO6d7F2SMU-1

When should you use them?

Use button groups when you have several related actions that users can choose from.

How should you use them?

  • Ensure buttons are clearly labeled and easily distinguishable.
  • Provide adequate spacing between buttons to prevent misclicks.
  • Use consistent styling for all buttons within the group.
  • Indicate the active or selected button visually.
  • Ensure button groups are accessible, with proper keyboard navigation.
Previous

No previous post
Up next

No next post