The Alert component is used to display a message to the user - and can be used to display an info, success, warning or error messages.
The default type, if none is specified, is info
.
Basic Usage
import { Alert } from '~/core/ui/Alert';
<Alert>
This is an info message.
</Alert>
You can also specify a title for the alert:
import { Alert, AlertHeading } from '~/core/ui/Alert';
<Alert>
<AlertHeading>Alert Title</AlertHeading>
This is an info message.
</Alert>
Success
The success
type can be used to display a success message:
import { Alert, AlertHeading } from '~/core/ui/Alert';
<Alert type="success">
<AlertHeading>Congrats!</AlertHeading>
You have successfully completed this task.
</Alert>
Warning
The warn
type can be used to display a warning message:
import { Alert, AlertHeading } from '~/core/ui/Alert';
<Alert type="warn">
<AlertHeading>Careful!</AlertHeading>
You may want to double-check this before proceeding.
</Alert>
Error
The error
type can be used to display an error message:
import { Alert, AlertHeading } from '~/core/ui/Alert';
<Alert type="error">
<AlertHeading>We hit an error</AlertHeading>
<p>
We are sorry, but we hit an error while processing your request.
Please try again later.
</p>
</Alert>