Design System Test

Preview all alert variants and UI components

Alert Variants

Default Alert

This is a default alert with neutral styling. Use for general informational messages.

Success Alert

Your order has been completed successfully. Funds have been transferred to your account.

Information Alert

Please note that processing times may vary depending on the payment method selected.

Warning Alert

Your order is currently on hold. Please contact support for more information.

Error Alert

There was an error processing your payout. Please verify your account details and try again.

Destructive Alert

This action cannot be undone. Please confirm before proceeding.

Deleted Alert

Your order has been cancelled. If you made a payment, funds will be returned within 3-5 business days.

Success without icon

This alert demonstrates the layout when no icon is provided.

Warning without icon

Notice how the grid adjusts when there's no icon element.

Just a title, no description needed

Error: Something went wrong

Operation completed successfully. No title needed for simple messages.

Click buttons to trigger different toast notification types.

Toggle the theme using the header switch to verify all variants render correctly in both light and dark modes.