Skip to content

Button group

Button Groups style a series of buttons that have a logical relationship into one cohesive group.

Code

Button Group

Button

Button

Button

<div class="btn-group" role="group">
    <certara-button color="secondary">Button</certara-button>
    <certara-button color="secondary">Button</certara-button>
    <certara-button color="secondary">Button</certara-button>
    <certara-button color="secondary">Button</certara-button>
</div>

In Practice

Button groups may include a combination of button variants, dropdown buttons, and buttons with badges or icons.
Button groups can be displayed in large, medium and small sizes.
- All buttons within a button group should be the same size.
Try to limit the number of buttons in a group so as not to visually and cognitively overwhelm users.

Accessibility

Screen readers should be made aware when buttons are part of a group role=“group”.
For more information, see our accessibility guidelines.

Design resources

View component in Figma