Homecomponentsinformational

Alert

A persistent, dismissable message with a tone.

Use Alert to show persistent messages which can be dismissed.

StarOfService Database Update on Wednesday, 27 May at 17:00 UTC (19:00 CEST)

Open in Playroom

Tone

Use the tone property to apply contextual color to the alert.

This is a success message

This is an warning message

This is a critical message

This is an informational message

Open in Playroom

Title

Use the title property to show title above the content.

Maintenance

StarOfService Database Update on Wednesday, 27 May at 17:00 UTC (19:00 CEST)

Open in Playroom

Dismiss

If the onDismiss callbac is present and there is no acton property, a close icon will be displayed on the Alert. Alert can be closed by clicking the icon.

Maintenance

StarOfService Database Update on Wednesday, 27 May at 17:00 UTC (19:00 CEST)

Open in Playroom

Action

Use the action property to show the action button on the Alert.

Maintenance

StarOfService Database Update on Wednesday, 27 May at 17:00 UTC (19:00 CEST)

Open in Playroom

Full Width

Use the fullWidth property to show the alert full-width.

Maintenance

StarOfService Database Update on Wednesday, 27 May at 17:00 UTC (19:00 CEST)

Open in Playroom

Icons

Use the showIcon property to show icons beside the alert content based on tone. For fullWidth alerts this property has no effect.

StarOfService Database Update on Wednesday, 27 May at 17:00 UTC (19:00 CEST)

Maintenance

StarOfService Database Update on Wednesday, 27 May at 17:00 UTC (19:00 CEST)

Maintenance

StarOfService Database Update on Wednesday, 27 May at 17:00 UTC (19:00 CEST)

Open in Playroom

API

children

Required

The content of the alert.

ReactNode

tone

Required

The color of the alert.

success

warning

informational

critical

title

Title of the alert that shows on top of content.

string

onDismiss

Callback for when alert is dismissed.

(() => void)

action

The action button to show on the right side of the alert.

{ label: string; onClick: () => void; }

fullWidth

Show a full-width alert.

true

false

showIcon

Show icons according to the tone.

true

false

data

An object with the data keys and values.

DataAttributeMap