Alert

Alert components for displaying important messages and feedback.

Solid

variant="default"

appearance="solid"

variant="destructive"

appearance="solid"

variant="success"

appearance="solid"

variant="warning"

appearance="solid"

variant="pending"

appearance="solid"

Outline

variant="default"

appearance="outline"

variant="destructive"

appearance="outline"

variant="success"

appearance="outline"

variant="warning"

appearance="outline"

variant="pending"

appearance="outline"

Light

variant="default"

appearance="light"

variant="destructive"

appearance="light"

variant="success"

appearance="light"

variant="warning"

appearance="light"

variant="pending"

appearance="light"

Sizes

size="xs"

variant="success" appearance="outline"

size="sm"

variant="success" appearance="outline"

size="md"

variant="success" appearance="outline"

size="lg"

variant="success" appearance="outline"

size="lg"

variant="destructive" appearance="outline"

size="lg"

variant="destructive" appearance="light"

Extended

IconBox variant="green"

Alert appearance="outline" with IconBox + AlertContent

IconBox variant="yellow"

Alert appearance="outline" with IconBox + AlertContent

IconBox variant="red"

Alert appearance="outline" with IconBox + AlertContent

Actions

close=true

variant="default" appearance="outline"

close=true (interactive)

variant="success" appearance="light" — click close to dismiss

AlertToolbar

variant="warning" appearance="outline" with action buttons