Alert

Communicate an important and usually time-sensitive message to the user.

The component make use of the `alert` role which trigger comprehensive response to assistive technology products, it should only be used for information that requires the user's immediate attention, e.g.:

An invalid value was entered into a form field
The user's login session is about to expire
The connection to the server was lost so local changes will not be saved

Anatomy

import { Alert } from '@onwo/ui';

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

With control

<Alert>
  <Alert.Title>
    <OtherFrameIcon size="md" />
    Alert with title and icon
  </Alert.Title>
  <Alert.Message> Alert message </Alert.Message>
  <Alert.Close onClick$={/* control unmount here */} />
</Alert>

Customization

<Alert>
  <Alert.Message>
    <OtherFrameIcon size="md" class="text-success" />
    Generic style with coloured icon
  </Alert.Message>
  <Alert.Close />
</Alert>

<Alert class="bg-transparent outline outline-1 outline-offset-[-1px] outline-success">
  <Alert.Message>
    <OtherFrameIcon class="text-success" size="md" />
    Outline style
  </Alert.Message>
  <Alert.Close />
</Alert>

<Alert class="bg-success-10">
  <Alert.Message>
    <OtherFrameIcon class="text-success" size="md" />
    Colourful style
  </Alert.Message>
  <Alert.Close />
</Alert>