Badge

Design guidelines

Small inline label for a count or status, rendered as a circle or pill in a semantic color.

Code

Framework

HTML

React

Angular

Badge

Badge

Toggle dark mode

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

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

<CertaraBadge shape="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 shape="badge">Badge</certara-badge>

Pill

Pill

Toggle dark mode

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

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

<CertaraBadge shape="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 shape="pill">Pill</certara-badge>

Circle

9

Toggle dark mode

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

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

<CertaraBadge shape="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 shape="circle">9</certara-badge>

Colors

Framework

HTML

React

Angular

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

Toggle dark mode

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

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

<CertaraBadge color="brand">brand</CertaraBadge>
<CertaraBadge color="neutral">neutral</CertaraBadge>
<CertaraBadge color="success">success</CertaraBadge>
<CertaraBadge color="warning">warning</CertaraBadge>
<CertaraBadge color="info">info</CertaraBadge>
<CertaraBadge color="danger">danger</CertaraBadge>
<CertaraBadge color="critical">critical</CertaraBadge>
<CertaraBadge color="magenta">magenta</CertaraBadge>
<CertaraBadge color="orange">orange</CertaraBadge>
<CertaraBadge color="olive">olive</CertaraBadge>
<CertaraBadge color="cyan">cyan</CertaraBadge>
<CertaraBadge color="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 color="brand">brand</certara-badge>
<certara-badge color="neutral">neutral</certara-badge>
<certara-badge color="success">success</certara-badge>
<certara-badge color="warning">warning</certara-badge>
<certara-badge color="info">info</certara-badge>
<certara-badge color="danger">danger</certara-badge>
<certara-badge color="critical">critical</certara-badge>
<certara-badge color="magenta">magenta</certara-badge>
<certara-badge color="orange">orange</certara-badge>
<certara-badge color="olive">olive</certara-badge>
<certara-badge color="cyan">cyan</certara-badge>
<certara-badge color="periwinkle">periwinkle</certara-badge>

Animation effect

Framework

HTML

React

Angular

Missing for FDA

Play

Toggle dark mode

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

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

<CertaraBadge color="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 color="danger" class="is-pulsing-border-5x-danger">Missing for FDA</certara-badge>

certara-badge

Properties

color

Attribute	color
Type	"brand" | "critical" | "cyan" | "danger" | "info" | "magenta" | "neutral" | "olive" | "orange" | "periwinkle" | "success" | "warning"
Default	undefined
Required	false
Description	Sets the color of the badge. Defaults to brand.

shape

Attribute	shape
Type	"badge" | "circle" | "pill"
Default	undefined
Required	false
Description	Sets the shape of the badge. Defaults to badge.

type

Attribute	type
Type	"badge" | "circle" | "pill"
Default	undefined
Required	false
Description	Sets the shape of the badge. DEPRECATED. Use shape instead. Will be removed in the next major version.

variant

Attribute	variant
Type	"brand" | "critical" | "cyan" | "danger" | "info" | "magenta" | "neutral" | "olive" | "orange" | "periwinkle" | "success" | "warning"
Default	undefined
Required	false
Description	Sets the color of the badge. DEPRECATED. Use color instead. Will be removed in the next major version.

Badges are either subtle or bold and use color to indicate meanings that users can learn and recognize across products.

Design guidelines

Brand Pill

Toggle dark mode

Animation effect

Missing for FDA

Play

Toggle dark mode

In practice

Selecting the badge’s shape and color

• Use pills to display only counts.
• Use critical badges sparingly and reserve them to display only counts like unread notification or unresolved issues.

Accessibility

• Text must be clear enough for color blind users to be able to understand immediately without needing to rely only on the color.
• Avoid using badges for longer text. Badges are not focusable, so the text truncated after 200 (or the custom maxWidth value) pixels will not be accessible.

Design resources

View component in Figma