Alert

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

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

<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

Back to top

MIT licensed. Pre-1.0 - the surface is still moving.