Alert - Intelligence Community Design System

Skip to page content

Show navigation section

Component demo

Interactive example

Web component

React

Show full code

<ic-alert
heading="Americano order"
message="Preparation status is unavailable."
></ic-alert>
<ic-alert
variant="info"
heading="Did you know?"
message="Coffee is a brewed drink prepared from roasted coffee beans."
></ic-alert>
<ic-alert
variant="error"
heading="Americano order error"
message="Americano couldn't be made, we ran out of beans."
></ic-alert>
<ic-alert
variant="warning"
heading="Hot drink"
message="Please be careful the drink is hot."
></ic-alert>
<ic-alert
variant="success"
heading="Americano order complete"
message="Success, your coffee is good to go."
></ic-alert>

<IcAlert
heading="Americano order"
message="Preparation status is unavailable."
/>
<IcAlert
variant="info"
heading="Did you know?"
message="Coffee is a brewed drink prepared from roasted coffee beans."
/>
<IcAlert
variant="error"
heading="Americano order error"
message="Americano couldn't be made, we ran out of beans."
/>
<IcAlert
variant="warning"
heading="Hot drink"
message="Please be careful the drink is hot."
/>
<IcAlert
variant="success"
heading="Americano order complete"
message="Success, your coffee is good to go."
/>

Alert details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property announced Attribute announced	If`true` , the alert will have the 'alert' ARIA role and will be announced to screen readers. type: boolean - boolean \| undefined	true
Property dismissible Attribute dismissible	If`true` , the alert will have a close icon at the end to dismiss it. type: boolean - boolean \| undefined	false
Property heading Attribute heading	The optional title to display at the start of the alert. type: string - string \| undefined	""
Property message Attribute message	The main body message of the alert. type: string - string \| undefined
Property showDefaultIcon Attribute show-default-icon	If`true` , the default icon for the neutral variant will appear on the left of the alert. type: boolean - boolean \| undefined	true
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light" \| undefined	"inherit"
Property titleAbove Attribute title-above	If`true` , the title and message will appear above and below instead of inline. type: boolean - boolean \| undefined	false
Property variant Attribute variant	The variant of the alert which will be rendered. type: IcStatusVariants - "error" \| "info" \| "neutral" \| "success" \| "warning" \| undefined	"neutral"

Property

announced

Attribute

announced

Iftrue , the alert will have the 'alert' ARIA role and will be announced to screen readers.

type: boolean - boolean | undefined

Default: true

Property

dismissible

Attribute

dismissible

Iftrue , the alert will have a close icon at the end to dismiss it.

type: boolean - boolean | undefined

Default: false

Property

heading

Attribute

heading

The optional title to display at the start of the alert.

type: string - string | undefined

Default: ""

Property

message

Attribute

message

The main body message of the alert.

type: string - string | undefined

Property

showDefaultIcon

Attribute

show-default-icon

Iftrue , the default icon for the neutral variant will appear on the left of the alert.

type: boolean - boolean | undefined

Default: true

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined

Default: "inherit"

Property

titleAbove

Attribute

title-above

Iftrue , the title and message will appear above and below instead of inline.

type: boolean - boolean | undefined

Default: false

Property

variant

Attribute

variant

The variant of the alert which will be rendered.

Default: "neutral"

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot action	Content is placed to the right of the message.
Slot message	Content is placed to the right of the title.
Slot neutral-icon	A custom neutral icon is placed to the left of the title. This will override the default icon if used.

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name	Description	Signature
Web component icDismiss React onIcDismiss	Is emitted when the user dismisses the alert.	void

Web component

icDismiss

React

onIcDismiss

Is emitted when the user dismisses the alert.

void

Variants

Dismissible

Interactive example

Web component

React

Show full code

<ic-alert
heading="Americano order nearly ready"
message="Your coffee is nearly ready. We'll send you another alert once it is complete."
dismissible="true"
></ic-alert>

<IcAlert
heading="Americano order nearly ready"
message="Your coffee is nearly ready. We'll send you another alert once it is complete."
dismissible
/>

With action

Interactive example

View Drinks

Web component

React

Show full code

<ic-alertvariant="info"heading="Did you know?"message="There is a new range of coffees to try.">
<ic-buttonslot="action"variant="secondary"monochrome="true">View Drinks</ic-button></ic-alert>

<IcAlert
variant="info"
heading="Did you know?"
message="There is a new range of coffees to try."
>
<IcButton
slot="action"
variant="secondary"
monochrome
onClick={(ev)=>console.log(ev)}
>
    View Drinks
</IcButton>
</IcAlert>

Title above

Interactive example

Web component

React

Show full code

<ic-alert
heading="What is Coffee?"
message="Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus."
title-above="true"
variant="info"
></ic-alert>

<IcAlert
heading="What is Coffee?"
message="Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus."
titleAbove
variant="info"
/>

Responsive title

Interactive example

Web component

React

Show full code

<ic-alert
heading="Here you can find out lots more information about the world's favourite hot drink."
message="Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus. From the coffee fruit, the seeds are separated to produce a stable, raw product: unroasted green coffee."
variant="info"
></ic-alert>

<IcAlert
heading="Here you can find out lots more information about the world's favourite hot drink."
message="Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus. From the coffee fruit, the seeds are separated to produce a stable, raw product: unroasted green coffee."
variant="info"
/>

Custom message

Interactive example

Go to our

coffee page

to learn more.

Web component

React

Show full code

<ic-alertvariant="info"heading="Want to know more about our coffee?">
<ic-typographyslot="message"> Go to our <ic-linkhref="/">coffee page</ic-link> to learn more.</ic-typography></ic-alert>

<IcAlertvariant="info"heading="Want to know more about our coffee?">
<IcTypographyslot="message"> Go to our <IcLinkhref="/">coffee page</IcLink> to learn more.</IcTypography>
</IcAlert>

With custom icon

Interactive example

Web component

React

Show full code

<ic-alert
variant="neutral"
heading="Increased wait times"
message="Due to unprecedented coffee demand, wait times may be longer than usual."
>
<svg
slot="neutral-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z"/>
</svg>
</ic-alert>

<IcAlert
variant="neutral"
heading="Increased wait times"
message="Due to unprecedented coffee demand, wait times may be longer than usual."
>
<SlottedSVG
slot="neutral-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z"/>
</SlottedSVG>
</IcAlert>

With no icon

Interactive example

Web component

React

Show full code

<ic-alert
heading="Order queued"
show-default-icon="false"
message="Your coffee order is in the queue. We'll notify you when it's ready to be picked up."
></ic-alert>

<IcAlert
heading="Order queued"
showDefaultIcon="false"
message="Your coffee order is in the queue. We'll notify you when it's ready to be picked up."
></IcAlert>

Theme

Interactive example

Web component

React

Show full code

<ic-alert
heading="Americano order"
message="Preparation status is unavailable."
theme="dark"
dismissible="true"
></ic-alert>
<ic-alert
variant="info"
heading="Did you know?"
message="Coffee is a brewed drink prepared from roasted coffee beans."
theme="dark"
dismissible="true"
></ic-alert>
<ic-alert
variant="error"
heading="Americano order error"
message="Americano couldn't be made, we ran out of beans."
theme="dark"
dismissible="true"
></ic-alert>
<ic-alert
variant="warning"
heading="Hot drink"
message="Please be careful the drink is hot."
theme="dark"
dismissible="true"
></ic-alert>
<ic-alert
variant="success"
heading="Americano order complete"
message="Success, your coffee is good to go."
theme="dark"
dismissible="true"
></ic-alert>

<IcAlert
heading="Americano order"
message="Preparation status is unavailable."
theme="dark"
dismissible
/>
<IcAlert
variant="info"
heading="Did you know?"
message="Coffee is a brewed drink prepared from roasted coffee beans."
theme="dark"
dismissible
/>
<IcAlert
variant="error"
heading="Americano order error"
message="Americano couldn't be made, we ran out of beans."
theme="dark"
dismissible
/>
<IcAlert
variant="warning"
heading="Hot drink"
message="Please be careful the drink is hot."
theme="dark"
dismissible
/>
<IcAlert
variant="success"
heading="Americano order complete"
message="Success, your coffee is good to go."
theme="dark"
dismissible
/>

Last reviewed 31 May 2024 .