Alert

Show 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

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

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

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

<CertaraAlert variant="success" headline="Notice title">
  <p>Along with a description that follows the title.</p>
</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">
  <p>Along with a description that follows the title.</p>
</certara-alert>

Warning

Along with a description that follows the title.

Toggle dark mode

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

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

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

<CertaraAlert variant="warning" headline="Notice title">
  <p>Along with a description that follows the title.</p>
</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">
  <p>Along with a description that follows the title.</p>
</certara-alert>

Danger

Along with a description that follows the title.

Toggle dark mode

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

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

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

<CertaraAlert variant="danger" headline="Notice title">
  <p>Along with a description that follows the title.</p>
</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">
  <p>Along with a description that follows the title.</p>
</certara-alert>

Props

Framework HTML React Angular

Dismissible

Dismissible alerts have a close button

Toggle dark mode

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

<certara-alert dismissible="true">
  <p>Dismissible alerts have a close button</p>
</certara-alert>

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

<CertaraAlert dismissible={true}>
  <p>Dismissible alerts have a close button</p>
</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="true">
  <p>Dismissible alerts have a close button</p>
</certara-alert>

Headline

Alert with a headline

Toggle dark mode

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

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

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

<CertaraAlert headline="Headline">
  <p>Alert with a headline</p>
</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">
  <p>Alert with a headline</p>
</certara-alert>

Shake

Will appear with a shake animation

Toggle dark mode

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

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

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

<CertaraAlert headline="Shake" shake={true}>
  <p>Will appear with a shake animation</p>
</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="true">
  <p>Will appear with a shake animation</p>
</certara-alert>

CTA Slot

Formatted buttons with alert-ctas slot

SaveCancel

Toggle dark mode

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

<certara-alert headline="With alert-ctas slot">
  <p>
    Formatted buttons with
    <code>alert-ctas</code>
    slot
  </p>
  <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">
  <p>
    Formatted buttons with
    <code>alert-ctas</code>
    slot
  </p>
  <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">
  <p>
    Formatted buttons with
    <code>alert-ctas</code>
    slot
  </p>
  <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" align-content="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" align-content="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" align-content="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

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	'info'
Required	false
Description	sets the theme/color of the alert

Events

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

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