Alert

Inline feedback message with icon and optional title. Use for contextual status — not for system-level notifications.

Variants

Heads up

Your trial expires in 3 days.

Payment received

Invoice #1042 has been paid.

Storage almost full

You've used 90% of your quota.

Something went wrong

Please try again or contact support.

Click × to dismiss this alert.

Your session will expire in 5 minutes.

variant= 'info'

'info' | 'success' | 'warning' | 'error'

Sets the colour and icon.

title

string

Optional bold heading rendered above the message.

children*

ReactNode

Alert body content.

onDismiss

() => void

If provided, renders a dismiss (×) button.

Prop	Type	Default	Description
variant	'info' \| 'success' \| 'warning' \| 'error'	'info'	Sets the colour and icon.
title	string	—	Optional bold heading rendered above the message.
children*	ReactNode	—	Alert body content.
onDismiss	() => void	—	If provided, renders a dismiss (×) button.