Badge

Show design guidelines

Code

Framework HTML React Angular

Badge

Brand

Toggle dark mode

<certara-badge variant="brand">Brand</certara-badge>

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

<CertaraBadge variant="brand">Brand</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>

Badge

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>

Animation effect

Framework HTML React Angular

Badge

Missing for FDA

Toggle dark mode

MDX may have transformed content. Use example prop instead on ComponentPreview.

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

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

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