Behaviour Lab Design System
Alert
Display alert notifications with different variants and optional close functionality. Icons are included by default but can be customized or disabled.
Default Alerts (with built-in icons)
Success!
Your changes have been saved successfully. The system has been updated with your preferences.
Error occurred
There was a problem processing your request. Please check your input and try again.
Warning!
This action cannot be undone. Please review your changes before proceeding.
Information
Here is some helpful information about the current process. This might be useful for your workflow.
Custom Icons
Custom Icon Element
This alert uses a custom icon element passed as a prop.
Custom Icon Component
This alert uses a custom icon component passed as a prop.
No Icons
Success without Icon
This alert has the icon disabled by passing icon=.
This alert only has a description and no icon.
Closeable Alerts
Dismissible Alert
This alert can be closed by clicking the X button in the top right corner.
Critical Error
This is a critical error that requires immediate attention. Click X to dismiss.
Usage
import { Alert, AlertDescription, AlertTitle } from '@blab-atlas/ui/alert'
import { CheckCircleOutlineIcon } from '@blab-atlas/react-icons/outline'
// Default usage (icons included automatically)
<Alert variant="success">
<AlertTitle>Success!</AlertTitle>
<AlertDescription>Your action was completed.</AlertDescription>
</Alert>
// With close functionality
<Alert variant="info" onClose={() => handleClose()}>
<AlertTitle>Dismissible</AlertTitle>
<AlertDescription>This alert can be closed.</AlertDescription>
</Alert>
// Custom icon element
<Alert variant="warning" icon={<CheckCircleOutlineIcon />}>
<AlertTitle>Custom Icon</AlertTitle>
<AlertDescription>Uses a custom icon element.</AlertDescription>
</Alert>
// Custom icon component
<Alert variant="info" icon={InformationCircleIcon}>
<AlertTitle>Custom Component</AlertTitle>
<AlertDescription>Uses a custom icon component.</AlertDescription>
</Alert>
// No icon
<Alert variant="success" icon={false}>
<AlertTitle>No Icon</AlertTitle>
<AlertDescription>This alert has no icon.</AlertDescription>
</Alert>
// Available variants: success, danger, warning, info, new