Button group

Design guidelines

Code

A wrapper for a group of buttons or button-like elements like a dropdown. It handles spacing and rounding of corners

Framework

HTML

React

Angular

Button Group

Button Button Button Button

Toggle dark mode

<certara-button-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>
</certara-button-group>

import { CertaraButton, CertaraButtonGroup } from '@certara/certara-ui-react';

<CertaraButtonGroup>
  <CertaraButton color="secondary">Button</CertaraButton>
  <CertaraButton color="secondary">Button</CertaraButton>
  <CertaraButton color="secondary">Button</CertaraButton>
  <CertaraButton color="secondary">Button</CertaraButton>
</CertaraButtonGroup>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button-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>
</certara-button-group>

certara-button-group

Properties

There are no public properties available for this component

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

Name	Description
	Slot for any certara-buttons or certara-dropdowns

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

Design guidelines

Button Group

Button Button Button Dropdown Item Dropdown Item

Toggle dark mode

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