Badge

Show design guidelines

Code

Framework HTML React Angular

Badge

Badge

Toggle dark mode

<certara-badge type="badge">Badge</certara-badge>

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

<CertaraBadge type="badge">Badge</CertaraBadge>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-badge type="badge">Badge</certara-badge>

Pill

Pill

Toggle dark mode

<certara-badge type="pill">Pill</certara-badge>

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

<CertaraBadge type="pill">Pill</CertaraBadge>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-badge type="pill">Pill</certara-badge>

Circle

9

Toggle dark mode

<certara-badge type="circle">9</certara-badge>

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

<CertaraBadge type="circle">9</CertaraBadge>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-badge type="circle">9</certara-badge>

Variants

Framework HTML React Angular

brand neutral success warning info danger critical magenta orange olive cyan periwinkle

Toggle dark mode

<certara-badge variant="brand">brand</certara-badge>
<certara-badge variant="neutral">neutral</certara-badge>
<certara-badge variant="success">success</certara-badge>
<certara-badge variant="warning">warning</certara-badge>
<certara-badge variant="info">info</certara-badge>
<certara-badge variant="danger">danger</certara-badge>
<certara-badge variant="critical">critical</certara-badge>
<certara-badge variant="magenta">magenta</certara-badge>
<certara-badge variant="orange">orange</certara-badge>
<certara-badge variant="olive">olive</certara-badge>
<certara-badge variant="cyan">cyan</certara-badge>
<certara-badge variant="periwinkle">periwinkle</certara-badge>

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

<CertaraBadge variant="brand">brand</CertaraBadge>
<CertaraBadge variant="neutral">neutral</CertaraBadge>
<CertaraBadge variant="success">success</CertaraBadge>
<CertaraBadge variant="warning">warning</CertaraBadge>
<CertaraBadge variant="info">info</CertaraBadge>
<CertaraBadge variant="danger">danger</CertaraBadge>
<CertaraBadge variant="critical">critical</CertaraBadge>
<CertaraBadge variant="magenta">magenta</CertaraBadge>
<CertaraBadge variant="orange">orange</CertaraBadge>
<CertaraBadge variant="olive">olive</CertaraBadge>
<CertaraBadge variant="cyan">cyan</CertaraBadge>
<CertaraBadge variant="periwinkle">periwinkle</CertaraBadge>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-badge variant="brand">brand</certara-badge>
<certara-badge variant="neutral">neutral</certara-badge>
<certara-badge variant="success">success</certara-badge>
<certara-badge variant="warning">warning</certara-badge>
<certara-badge variant="info">info</certara-badge>
<certara-badge variant="danger">danger</certara-badge>
<certara-badge variant="critical">critical</certara-badge>
<certara-badge variant="magenta">magenta</certara-badge>
<certara-badge variant="orange">orange</certara-badge>
<certara-badge variant="olive">olive</certara-badge>
<certara-badge variant="cyan">cyan</certara-badge>
<certara-badge variant="periwinkle">periwinkle</certara-badge>

Animation effect

Framework HTML React Angular

Missing for FDA

Play

Toggle dark mode

<certara-badge variant="danger" class="is-pulsing-border-5x-danger">Missing for FDA</certara-badge>

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

<CertaraBadge variant="danger" className="is-pulsing-border-5x-danger">Missing for FDA</CertaraBadge>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-badge variant="danger" class="is-pulsing-border-5x-danger">Missing for FDA</certara-badge>

certara-badge

Properties

type

Attribute	type
Type	"badge" | "circle" | "pill"
Default	'badge'
Required	false
Description

variant

Attribute	variant
Type	"brand" | "critical" | "cyan" | "danger" | "info" | "magenta" | "neutral" | "olive" | "orange" | "periwinkle" | "success" | "warning"
Default	'brand'
Required	false
Description