Skip to content
Block Kit for React
Esc
↑↓navigate↵open⌘Jpreview
On this page

Alert

An inline banner for a warning, error, info, or success message.

alert is an inline message with a colored background and an icon that matches its level. Slack only accepts it inside modals, so use it for validation feedback or a heads-up in a form.

My App

The work is mysterious and important.
Default level, set in plain text.
Heads up: this change can't be undone.
Saved. Your teammates can see it now.

Fields

PropType
typestring

Always `alert`.

Typestring
text?PlainTextElement | MrkdwnElement

The message. Supports the same `plain_text` and `mrkdwn` text objects as a section.

TypePlainTextElement | MrkdwnElement
level?"default" | "info" | "warning" | "error" | "success"

The banner color and icon. An unrecognized or omitted value falls back to `default`.

Type"default" | "info" | "warning" | "error" | "success"
Default"default"

Examples

Every level

The preview above shows all five: default, info, warning, error, and success. The error level is announced to assistive technology as an alert; the others as a status update.

Long text

My App

A longer alert wraps onto more than one line, to show how the icon lines up with the first line of text and how the box grows with its content.

The icon stays aligned with the first line as the text wraps, and the banner grows to fit the content.

Was this page helpful?