Button Group

Button Groups are ideal for related actions that should be visually connected, such as text formatting tools (bold, italic, underline), view mode switchers (grid/list), or pagination controls. They help users understand that the actions are related.

While technically possible, it's best to use consistent variants within a Button Group for visual cohesion. However, you can highlight a selected state by using a different variant, such as solid for selected and outline for unselected buttons.

Use different button variants to indicate the active state. For example, use a solid variant for the active button and outline variant for inactive ones. This provides clear visual feedback about the current selection.

Yes! Button Groups work great for single-selection scenarios (like radio buttons) where users need to choose one option from a set. They provide better visual prominence than traditional radio inputs for important choices.

Yes, Button Groups adapt to different screen sizes. On mobile, you might want to stack buttons vertically or reduce their size. The component maintains proper border handling in both horizontal and vertical orientations.

Yes, this Figma Button Group component matches the shadcn/ui implementation, ensuring seamless translation from design to code with consistent styling and behavior.