Button

Show design guidelines

Variants

Framework HTML React Angular

Solid

BrandSecondaryDangerSuccess

Inverse

Toggle dark mode

<div class="p-6 d-flex justify-content-center space-x space-x-3">
  <certara-button color="brand">Brand</certara-button>
  <certara-button color="secondary">Secondary</certara-button>
  <certara-button color="danger">Danger</certara-button>
  <certara-button color="success">Success</certara-button>
</div>
<div class="bg-inverse p-6 d-flex justify-content-center space-x space-x-3">
  <certara-button color="inverse">Inverse</certara-button>
</div>

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

<div class="p-6 d-flex justify-content-center space-x space-x-3">
  <CertaraButton color="brand">Brand</CertaraButton>
  <CertaraButton color="secondary">Secondary</CertaraButton>
  <CertaraButton color="danger">Danger</CertaraButton>
  <CertaraButton color="success">Success</CertaraButton>
</div>
<div class="bg-inverse p-6 d-flex justify-content-center space-x space-x-3">
  <CertaraButton color="inverse">Inverse</CertaraButton>
</div>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<div class="p-6 d-flex justify-content-center space-x space-x-3">
  <certara-button color="brand">Brand</certara-button>
  <certara-button color="secondary">Secondary</certara-button>
  <certara-button color="danger">Danger</certara-button>
  <certara-button color="success">Success</certara-button>
</div>
<div class="bg-inverse p-6 d-flex justify-content-center space-x space-x-3">
  <certara-button color="inverse">Inverse</certara-button>
</div>

Outline

Brand Secondary Danger Success

Inverse

Toggle dark mode

<div class="p-6 d-flex justify-content-center space-x space-x-3">
  <certara-button color="brand" variant="outline">Brand</certara-button>
  <certara-button color="secondary" variant="outline">Secondary</certara-button>
  <certara-button color="danger" variant="outline">Danger</certara-button>
  <certara-button color="success" variant="outline">Success</certara-button>
</div>
<div class="bg-inverse p-6 d-flex justify-content-center space-x space-x-3">
  <certara-button color="inverse" variant="outline">Inverse</certara-button>
</div>

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

<div class="p-6 d-flex justify-content-center space-x space-x-3">
  <CertaraButton color="brand" variant="outline">Brand</CertaraButton>
  <CertaraButton color="secondary" variant="outline">Secondary</CertaraButton>
  <CertaraButton color="danger" variant="outline">Danger</CertaraButton>
  <CertaraButton color="success" variant="outline">Success</CertaraButton>
</div>
<div class="bg-inverse p-6 d-flex justify-content-center space-x space-x-3">
  <CertaraButton color="inverse" variant="outline">Inverse</CertaraButton>
</div>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<div class="p-6 d-flex justify-content-center space-x space-x-3">
  <certara-button color="brand" variant="outline">Brand</certara-button>
  <certara-button color="secondary" variant="outline">Secondary</certara-button>
  <certara-button color="danger" variant="outline">Danger</certara-button>
  <certara-button color="success" variant="outline">Success</certara-button>
</div>
<div class="bg-inverse p-6 d-flex justify-content-center space-x space-x-3">
  <certara-button color="inverse" variant="outline">Inverse</certara-button>
</div>

Link buttons

Link

Toggle dark mode

<certara-button variant="link">Link</certara-button>

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

<CertaraButton variant="link">Link</CertaraButton>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button variant="link">Link</certara-button>

Additional sizing

(Note: Works on solid, outline, and link buttons)

Framework HTML React Angular

Small

Small button

Toggle dark mode

<certara-button color="brand" size="sm">Small button</certara-button>

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

<CertaraButton color="brand" size="sm">Small button</CertaraButton>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button color="brand" size="sm">Small button</certara-button>

Large

Large button

Toggle dark mode

<certara-button color="brand" size="lg">Large button</certara-button>

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

<CertaraButton color="brand" size="lg">Large button</CertaraButton>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button color="brand" size="lg">Large button</certara-button>

Icons

(Note: Works on solid, outline, and link buttons)

Framework HTML React Angular

Left

Icon on left

Toggle dark mode

<certara-button left-icon="plus">Icon on left</certara-button>

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

<CertaraButton left-icon="plus">Icon on left</CertaraButton>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button left-icon="plus">Icon on left</certara-button>

Right

Icon on right

Toggle dark mode

<certara-button right-icon="arrow-right">Icon on right</certara-button>

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

<CertaraButton right-icon="arrow-right">Icon on right</CertaraButton>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button right-icon="arrow-right">Icon on right</certara-button>

Both

Icon on both

Toggle dark mode

<certara-button left-icon="plus" right-icon="arrow-right">Icon on both</certara-button>

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

<CertaraButton left-icon="plus" right-icon="arrow-right">Icon on both</CertaraButton>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button left-icon="plus" right-icon="arrow-right">Icon on both</certara-button>

Custom icons

Custom icons

Toggle dark mode

<certara-button>
  <certara-icon name="plus" variant="light" role="presentation"></certara-icon>
  Custom icons
  <certara-icon name="arrow-right" variant="solid" role="presentation"></certara-icon>
</certara-button>

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

<CertaraButton>
  <CertaraIcon name="plus" variant="light" role="presentation" />
  Custom icons
  <CertaraIcon name="arrow-right" variant="solid" role="presentation" />
</CertaraButton>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button>
  <certara-icon name="plus" variant="light" role="presentation"></certara-icon>
  Custom icons
  <certara-icon name="arrow-right" variant="solid" role="presentation"></certara-icon>
</certara-button>

Links

If you have a <button> that for whatever reason needs to look like a link, eschew the use of <certara-button> in favor of a simple <button> with a class="link". Use Text color utilities to effect color variances.

Framework HTML React Angular

Buttons as "links"

LinkBrandDangerSuccess

Inverse

Toggle dark mode

<div class="d-flex justify-content-center space-x space-x-6 p-6">
  <button class="link">Link</button>
  <button class="link text-brand">Brand</button>
  <button class="link text-danger">Danger</button>
  <button class="link text-success">Success</button>
</div>
<div class="bg-inverse p-6 d-flex justify-content-center space-x space-x-3">
  <button class="link text-inverse">Inverse</button>
</div>

<div class="d-flex justify-content-center space-x space-x-6 p-6">
  <button class="link">Link</button>
  <button class="link text-brand">Brand</button>
  <button class="link text-danger">Danger</button>
  <button class="link text-success">Success</button>
</div>
<div class="bg-inverse p-6 d-flex justify-content-center space-x space-x-3">
  <button class="link text-inverse">Inverse</button>
</div>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<div class="d-flex justify-content-center space-x space-x-6 p-6">
  <button class="link">Link</button>
  <button class="link text-brand">Brand</button>
  <button class="link text-danger">Danger</button>
  <button class="link text-success">Success</button>
</div>
<div class="bg-inverse p-6 d-flex justify-content-center space-x space-x-3">
  <button class="link text-inverse">Inverse</button>
</div>

Icon buttons

Framework HTML React Angular

Example

Toggle dark mode

<div class="d-flex space-x space-x-4">
  <div class="p-3">
    <certara-button variant="icon" color="brand">
      <certara-icon name="arrow-right" />
    </certara-button>
  </div>
  <div class="p-3">
    <certara-button variant="icon" color="neutral">
      <certara-icon name="arrow-right" />
    </certara-button>
  </div>
  <div class="p-3 bg-inverse">
    <certara-button variant="icon" color="inverse">
      <certara-icon name="arrow-right" />
    </certara-button>
  </div>
  <div class="p-3">
    <certara-button variant="icon" color="danger">
      <certara-icon name="trash" />
    </certara-button>
  </div>
  <div class="p-3">
    <certara-button variant="icon" color="success">
      <certara-icon name="circle-check" />
    </certara-button>
  </div>
</div>

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

<div class="d-flex space-x space-x-4">
  <div class="p-3">
    <CertaraButton variant="icon" color="brand">
      <CertaraIcon name="arrow-right" />
    </CertaraButton>
  </div>
  <div class="p-3">
    <CertaraButton variant="icon" color="neutral">
      <CertaraIcon name="arrow-right" />
    </CertaraButton>
  </div>
  <div class="p-3 bg-inverse">
    <CertaraButton variant="icon" color="inverse">
      <CertaraIcon name="arrow-right" />
    </CertaraButton>
  </div>
  <div class="p-3">
    <CertaraButton variant="icon" color="danger">
      <CertaraIcon name="trash" />
    </CertaraButton>
  </div>
  <div class="p-3">
    <CertaraButton variant="icon" color="success">
      <CertaraIcon name="circle-check" />
    </CertaraButton>
  </div>
</div>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<div class="d-flex space-x space-x-4">
  <div class="p-3">
    <certara-button variant="icon" color="brand">
      <certara-icon name="arrow-right"></certara-icon>
    </certara-button>
  </div>
  <div class="p-3">
    <certara-button variant="icon" color="neutral">
      <certara-icon name="arrow-right"></certara-icon>
    </certara-button>
  </div>
  <div class="p-3 bg-inverse">
    <certara-button variant="icon" color="inverse">
      <certara-icon name="arrow-right"></certara-icon>
    </certara-button>
  </div>
  <div class="p-3">
    <certara-button variant="icon" color="danger">
      <certara-icon name="trash"></certara-icon>
    </certara-button>
  </div>
  <div class="p-3">
    <certara-button variant="icon" color="success">
      <certara-icon name="circle-check"></certara-icon>
    </certara-button>
  </div>
</div>

Selected State

Framework HTML React Angular

Example

3

Toggle dark mode

<div class="d-flex space-x space-x-4">
  <div class="p-3">
    <certara-button variant="icon" color="brand" inner-class-name="certara-btn-icon--active">
      <certara-icon name="arrow-right" />
    </certara-button>
  </div>
  <div class="p-3">
    <certara-button variant="icon" color="brand" inner-class-name="certara-btn-icon--active">
      3
    </certara-button>
  </div>
  <div class="p-3">
    <certara-button variant="icon" color="success" inner-class-name="certara-btn-icon--active">
      <certara-icon name="circle-check" variant="solid" />
    </certara-button>
  </div>
</div>

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

<div class="d-flex space-x space-x-4">
  <div class="p-3">
    <CertaraButton variant="icon" color="brand" inner-class-name="certara-btn-icon--active">
      <CertaraIcon name="arrow-right" />
    </CertaraButton>
  </div>
  <div class="p-3">
    <CertaraButton variant="icon" color="brand" inner-class-name="certara-btn-icon--active">
      3
    </CertaraButton>
  </div>
  <div class="p-3">
    <CertaraButton variant="icon" color="success" inner-class-name="certara-btn-icon--active">
      <CertaraIcon name="circle-check" variant="solid" />
    </CertaraButton>
  </div>
</div>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<div class="d-flex space-x space-x-4">
  <div class="p-3">
    <certara-button variant="icon" color="brand" inner-class-name="certara-btn-icon--active">
      <certara-icon name="arrow-right"></certara-icon>
    </certara-button>
  </div>
  <div class="p-3">
    <certara-button variant="icon" color="brand" inner-class-name="certara-btn-icon--active">
      3
    </certara-button>
  </div>
  <div class="p-3">
    <certara-button variant="icon" color="success" inner-class-name="certara-btn-icon--active">
      <certara-icon name="circle-check" variant="solid"></certara-icon>
    </certara-button>
  </div>
</div>

Button groups

Framework HTML React Angular

Button Group

Button Button Button Button

Toggle dark mode

<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>

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

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

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

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

certara-button

Properties

block

Attribute	block
Type	boolean
Default	false
Required	false
Description

color

Attribute	color
Type	"brand" | "danger" | "inverse" | "neutral" | "secondary" | "success"
Default	'brand'
Required	false
Description

configAria

Attribute	config-aria
Type	any
Default	{}
Required	false
Description

disabled

Attribute	disabled
Type	boolean
Default	false
Required	false
Description

href

Attribute	href
Type	string
Default	undefined
Required	false
Description

innerClassName

Attribute	inner-class-name
Type	string
Default	undefined
Required	false
Description

leftIcon

Attribute	left-icon
Type	string
Default	undefined
Required	false
Description

popoverTarget

Attribute	popover-target
Type	string
Default	undefined
Required	false
Description

popoverTargetAction

Attribute	popover-target-action
Type	"hide" | "show" | "toggle"
Default	undefined
Required	false
Description

rightIcon

Attribute	right-icon
Type	string
Default	undefined
Required	false
Description

showLoader

Attribute	show-loader
Type	boolean
Default	false
Required	false
Description

size

Attribute	size
Type	"lg" | "md" | "sm"
Default	'md'
Required	false
Description

target

Attribute	target
Type	"_blank" | "_parent" | "_self" | "_top" | "_unfencedTop"
Default	undefined
Required	false
Description

type

Attribute	type
Type	"button" | "reset" | "submit"
Default	'button'
Required	false
Description

variant

Attribute	variant
Type	"default" | "icon" | "link" | "outline" | "reset"
Default	'default'
Required	false
Description

Events

Name	Description	Bubbles
certaraBlur		true
certaraClick		true
certaraFocus		true