Button group

Show 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