alert.md

title	Alert
parent	Display and data
grand_parent	Components

Alert

{: .no_toc }

A message worth a row of its own, in one of four tones.

import { Alert } from '@textui/widgets';

<Alert tone="warning" title="Degraded" message="Two of six workers are not responding." />

Props

Prop	Type	Default
tone	'info' | 'success' | 'warning' | 'danger'	'info'
title	string
message	string

Plus everything on BoxProps.

Role: alert.

Four tones only - info, success, warning, danger - rather than the full semantic scale, because an alert that is muted or secondary is not an alert.

title alone is a single line; adding message makes it a block. Children are laid out below both, for an alert that needs an action in it.

See also

• ErrorState - when the whole region failed, not one message
• Toast - a message that leaves on its own