Alert

ARIA
RTL

A way of informing the user of important changes in a prominent way.

Alert

Anatomy

<Alert>
  <Alert.Title>...</Alert.Title>
  <Alert.Message>...</Alert.Message>
  <Alert.Close />
</Alert>

Default

With title

With icon

With close

With icon and close

Handle close

Customization

Alert props

NameTypeRequiredDefaultDescription
classNamestringNo-Tailwind classes for customization

Alert.Title props

NameTypeRequiredDefaultDescription
childrenstring | React.ReactNodeNo-Children content
classNamestringNo-Tailwind classes for customization

Alert.Message props

NameTypeRequiredDefaultDescription
childrenstring | React.ReactNodeNo-Children content
classNamestringNo-Tailwind classes for customization