Button Group

A basic button group with Outline buttons joined together. The component automatically removes inner border radii and collapses shared borders for a seamless, connected appearance.

Buttons within a group can use different Variant values such as Default, Outline, and Ghost. This is useful when you want to visually emphasise a primary action while keeping secondary actions grouped alongside it.

Icon-only button groups work well for compact toolbars. Use Size="ButtonSize.Icon" on each button and provide an AriaLabel on the group to describe its purpose for screen readers.

Set Orientation to ButtonGroupOrientation.Vertical to stack buttons top-to-bottom. Vertical groups work well in sidebar toolbars and narrow layouts where horizontal space is limited.

Use ButtonGroupSeparator to insert a visual divider between logical sections inside a group. Buttons adjacent to a separator retain their own borders, making it clear where one section ends and another begins.

Use ButtonGroupText to embed a non-interactive label inside the group. The label renders with a muted background to visually distinguish it from the interactive buttons, making it ideal for labelling toolbar sections.

Button groups work seamlessly with all button sizes. Apply Size consistently to each button within the group — Small, Default, and Large — to maintain a uniform height.

Use the Class parameter on the ButtonGroup to apply custom Tailwind classes such as rounded corners, shadows, or spacing. Individual buttons can also receive custom classes for gradient or themed styling.

A real-world toolbar pattern combining multiple button groups with separators. This is common in rich-text editors and design tools where related actions are clustered together and separated from other groups.