Alert

Skip to page content

BETA

Component demo

Interactive example

Americano order

Preparation status is unavailable.

Did you know?

Coffee is a brewed drink prepared from roasted coffee beans.

Americano order error

Americano couldn't be made, we ran out of beans.

Hot drink

Please be careful the drink is hot.

Americano order complete

Success, your coffee is good to go.

Web component

React

<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	true
Property dismissible Attribute dismissible	If`true` , the alert will have a close icon at the end to dismiss it. type: boolean	false
Property heading Attribute heading	The optional title to display at the start of the alert. type: string	""
Property message Attribute message	The main body message of the alert. type: string
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	true
Property titleAbove Attribute title-above	If`true` , the title and message will appear above and below instead of inline. type: boolean	false
Property variant Attribute variant	The variant of the alert which will be rendered. type: IcStatusVariants - "error" \| "info" \| "neutral" \| "success" \| "warning"	"neutral"

Property

announced

Attribute

announced

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

type: boolean

Default: true

Property

dismissible

Attribute

dismissible

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

type: boolean

Default: false

Property

heading

Attribute

heading

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

type: string

Default: ""

Property

message

Attribute

message

The main body message of the alert.

type: string

Property

showDefaultIcon

Attribute

show-default-icon

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

type: boolean

Default: true

Property

titleAbove

Attribute

title-above

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

type: boolean

Default: false

Property

variant

Attribute

variant

The variant of the alert which will be rendered.

type: IcStatusVariants - "error" | "info" | "neutral" | "success" | "warning"

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 dismiss React onDismiss	This event should not be used anymore. Use icDismiss instead. Deprecated	void
Web component icDismiss React onIcDismiss	Is emitted when the user dismisses the alert.	void

Web component

dismiss

React

onDismiss

This event should not be used anymore. Use icDismiss instead.

Deprecated

void

Web component

icDismiss

React

onIcDismiss

Is emitted when the user dismisses the alert.

void

Variants

Dismissible

Interactive example

Americano order nearly ready

Your coffee is nearly ready. We'll send you another alert once it is complete.

Web component

React

<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

Did you know?

There is a new range of coffees to try.

Web component

React

<ic-alertvariant="info"heading="Did you know?"message="There is a new range of coffees to try.">
<ic-buttonslot="action"variant="secondary"appearance="dark">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"
appearance="dark"
onClick={(ev)=>console.log(ev)}
>
    View Drinks
</IcButton>
</IcAlert>

Title above

Interactive example

What is Coffee?

Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus.

Web component

React

<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

Here you can find out lots more information about the world's favourite hot drink.

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.

Web component

React

<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

Want to know more about our coffee?

Go to our

coffee page

to learn more.

Web component

React

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

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

With custom icon

Interactive example

Increased wait times

Due to unprecedented coffee demand, wait times may be longer than usual.

Web component

React

<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

Order queued

Your coffee order is in the queue. We'll notify you when it's ready to be picked up.

Web component

React

<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>

Last reviewed 31 May 2024 .