Alert

Design guidelines

Code

Variants

Framework

HTML

React

Angular

Info

Along with a description that follows the title.

Toggle dark mode

<certara-alert headline="Notice title">
  Along with a description that follows the title.
</certara-alert>

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

<CertaraAlert headline="Notice title">
  Along with a description that follows the title.
</CertaraAlert>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-alert headline="Notice title">
  Along with a description that follows the title.
</certara-alert>

Success

Along with a description that follows the title.

Toggle dark mode

<certara-alert variant="success" headline="Notice title">
  Along with a description that follows the title.
</certara-alert>

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

<CertaraAlert variant="success" headline="Notice title">
  Along with a description that follows the title.
</CertaraAlert>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-alert variant="success" headline="Notice title">
  Along with a description that follows the title.
</certara-alert>

Warning

Along with a description that follows the title.

Toggle dark mode

<certara-alert variant="warning" headline="Notice title">
  Along with a description that follows the title.
</certara-alert>

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

<CertaraAlert variant="warning" headline="Notice title">
  Along with a description that follows the title.
</CertaraAlert>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-alert variant="warning" headline="Notice title">
  Along with a description that follows the title.
</certara-alert>

Danger

Along with a description that follows the title.

Toggle dark mode

<certara-alert variant="danger" headline="Notice title">
  Along with a description that follows the title.
</certara-alert>

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

<CertaraAlert variant="danger" headline="Notice title">
  Along with a description that follows the title.
</CertaraAlert>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-alert variant="danger" headline="Notice title">
  Along with a description that follows the title.
</certara-alert>

Props

Framework

HTML

React

Angular

Dismissible

Dismissible alerts have a close button

Play

Toggle dark mode

<certara-alert dismissible>Dismissible alerts have a close button</certara-alert>

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

<CertaraAlert dismissible>Dismissible alerts have a close button</CertaraAlert>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-alert dismissible>Dismissible alerts have a close button</certara-alert>

Headline

Alert with a headline

Toggle dark mode

<certara-alert headline="Headline">Alert with a headline</certara-alert>

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

<CertaraAlert headline="Headline">Alert with a headline</CertaraAlert>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-alert headline="Headline">Alert with a headline</certara-alert>

Shake

Will appear with a shake animation

Play

Toggle dark mode

<certara-alert headline="Shake" shake>Will appear with a shake animation</certara-alert>

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

<CertaraAlert headline="Shake" shake>Will appear with a shake animation</CertaraAlert>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-alert headline="Shake" shake>Will appear with a shake animation</certara-alert>

CTA Slot

Formatted buttons with alert-ctas slot

Save Cancel

Toggle dark mode

<certara-alert headline="With alert-ctas slot">
  Formatted buttons with
  <code>alert-ctas</code>
  slot
  <div slot="alert-ctas">
    <certara-button size="sm">Save</certara-button>
    <certara-button size="sm" color="secondary">Cancel</certara-button>
  </div>
</certara-alert>

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

<CertaraAlert headline="With alert-ctas slot">
  Formatted buttons with
  <code>alert-ctas</code>
  slot
  <div slot="alert-ctas">
    <CertaraButton size="sm">Save</CertaraButton>
    <CertaraButton size="sm" color="secondary">Cancel</CertaraButton>
  </div>
</CertaraAlert>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-alert headline="With alert-ctas slot">
  Formatted buttons with
  <code>alert-ctas</code>
  slot
  <div slot="alert-ctas">
    <certara-button size="sm">Save</certara-button>
    <certara-button size="sm" color="secondary">Cancel</certara-button>
  </div>
</certara-alert>

Alignment

Framework

HTML

React

Angular

Center

Toggle dark mode

<certara-alert variant="success" align-content="center" headline="Saved!"></certara-alert>

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

<CertaraAlert variant="success" alignContent="center" headline="Saved!" />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-alert variant="success" align-content="center" headline="Saved!"></certara-alert>

Right

Toggle dark mode

<certara-alert variant="success" align-content="right" headline="Right"></certara-alert>

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

<CertaraAlert variant="success" alignContent="right" headline="Right" />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-alert variant="success" align-content="right" headline="Right"></certara-alert>

Left (default)

Toggle dark mode

<certara-alert variant="success" align-content="left" headline="Left"></certara-alert>

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

<CertaraAlert variant="success" alignContent="left" headline="Left" />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-alert variant="success" align-content="left" headline="Left"></certara-alert>

certara-alert

Properties

alignContent

Attribute	align-content
Type	"center" | "left" | "right"
Default	'left'
Required	false
Description	The content alignment inside the alert

color

Attribute	color
Type	"danger" | "info" | "success" | "warning"
Default	undefined
Required	false
Description	Sets the theme/color of the alert. Defaults to info.

dismissible

Attribute	dismissible
Type	boolean
Default	false
Required	false
Description	If true, the alert can be dismissed by clicking the close button

headline

Attribute	headline
Type	string
Default	undefined
Required	false
Description	The bolded first sentence of the alert

shake

Attribute	shake
Type	boolean
Default	false
Required	false
Description	If true, the alert will shake when it appears

toast

Attribute	toast
Type	boolean
Default	false
Required	false
Description	Internal prop. If true, the alert will be displayed as a toast, fades and animates in, then typically disappears after a few seconds or is present until the user dismisses it. Preferable to use the certara-toast component instead

variant

Attribute	variant
Type	"danger" | "info" | "success" | "warning"
Default	undefined
Required	false
Description	Sets the theme/color of the alert. DEPRECATED. Use color instead. Will be removed in the next major version.

Events

Name	Description	Bubbles
certaraClose	Event emitted when the alert is closed if dismissible is true	false

Methods

There are no public methods available for this component

Slots

Name	Description
	Default alert content
alert-ctas	Slot for additional call-to-action buttons or links

Banner alerts inform users about important changes or persistent conditions in a prominent way. These alerts can be placed at the top of a page or on a particular section of a page.

Design guidelines

Variants

Info

Along with a description that follows the title.

Primary Secondary Tertiary

Toggle dark mode

Success

Along with a description that follows the title.

Primary Secondary Tertiary

Toggle dark mode

Warning

Along with a description that follows the title.

Primary Secondary Tertiary

Toggle dark mode

Danger

Along with a description that follows the title.

Primary Secondary Tertiary

Toggle dark mode

Alignment

Center

Toggle dark mode

Animation

Shake

Use this animation to draw extra attention to an important message.

Along with a description that follows the title.

Play

Toggle dark mode

In practice

• The dismiss (X) option allows users to close a system alert which removes it from the page. Alerts should be dismissible unless they contain critical information or an important action step.
• DO NOT include the dismiss option on Danger alerts.
• If the dismiss option is included and there is no action available to take, do not include a button labeled “Close” or “Cancel”.

Variants

The four variants use different icons and colors to indicate the type and urgency of the message.

• Info: informs the user of a change or gives them advice.
• Success: lets the user know of a successful outcome. NOTE: Toast alerts are used by default for this type of messaging. Use a banner alert only if it is persistent, delayed, or if there is an additional action.
• Warning: lets the user know about important system information that deserves caution.
• Danger: alerts the user of a problem that requires immediate attention.

Placement

• If the message relates to the page topic as a whole, place the alert at the top of the page.
• If the message is specific to a section of the page, place the alert below the section header.
• Banner alerts always span the full width of the container to which they apply.

Content guidelines

Title

• Use plain English instead of obscure codes or abbreviations.
• Follow the content guidelines for headings and subheadings. View guidelines

Body

• Be concise: keep content to 1 to 2 sentences where possible
• Clarify the benefit of the main task
• Be written in sentence case and use appropriate punctuation
• Avoid repeating the heading
• Explain how to resolve the issue, particularly for warning and critical banners

Accessibility

Keyboard focus: When an urgent alert is dynamically added to the page, ensure its content receives immediate attention.

Follow the accessibility guidelines for each component found in the alert. View guidelines

Design resources

View component in Figma