Alert

Examples

Solid

Inspect

variant="default"

appearance="solid"

variant="destructive"

appearance="solid"

variant="success"

appearance="solid"

variant="warning"

appearance="solid"

variant="pending"

appearance="solid"

Outline

Inspect

variant="default"

appearance="outline"

variant="destructive"

appearance="outline"

variant="success"

appearance="outline"

variant="warning"

appearance="outline"

variant="pending"

appearance="outline"

Light

Inspect

variant="default"

appearance="light"

variant="destructive"

appearance="light"

variant="success"

appearance="light"

variant="warning"

appearance="light"

variant="pending"

appearance="light"

Sizes

Inspect

size="xs"

Padding, type scale and icon all step with the size.

size="sm"

Padding, type scale and icon all step with the size.

size="md"

Padding, type scale and icon all step with the size.

size="lg"

Padding, type scale and icon all step with the size.

Extended

Inspect

IconTile tone="green"

Alert appearance="outline" with IconTile + AlertContent

IconTile tone="yellow"

Alert appearance="outline" with IconTile + AlertContent

IconTile tone="red"

Alert appearance="outline" with IconTile + AlertContent

Actions

Inspect

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

Actions, every variant

Inspect

variant="destructive"

1 item is no longer available

Remove it to check out the rest of this bag.

variant="warning"

Verify your identity

You're close to the payout limit for unverified sellers.

variant="success"

Payout on its way

It usually lands within two business days.

variant="default"

Add a shipping address

Sellers need it before they can send your order.

variant="pending"

Waiting for the seller

They have 48 hours to accept your offer.

Actions at every size

Inspect

size="sm"

1 item is no longer available. Remove it to check out the rest.

size="md"

1 item is no longer available. Remove it to check out the rest.

size="lg"

1 item is no longer available. Remove it to check out the rest.

On this page