Alert

Variants

Four variants are available to match the nature of the message:

With title

Pass a title to add a heading above the body text. Use this when the alert needs extra emphasis or context.

With dismiss

Pass onDismiss to show a close button. Use this for non-critical alerts the user can choose to hide.

Usage

Pass a variant to control the color and icon. Use title for a heading above the body text. Add onDismiss to show a close button — the parent component is responsible for removing the alert when dismissed.

Explore the Alert component by adjusting its properties below. Changes are reflected in the live preview and code snippet in real time.

<Alert variant="success" title="Watering complete">
  All plants in the tropical zone have been watered successfully.
</Alert>