Components
Alert
Documentation for the Alert component.
Alert
Preview
Interactive
Maintenance Alert
The API server will undergo scheduled updates tonight at 12:00 AM UTC.Properties
Alert Variant
Live Code Snippet
import { Alert } from '@moul-dev/ui';
import { useState } from 'react';
export default function Example() {
const [isOpen, setIsOpen] = useState(true);
if (!isOpen) return null;
return (
<Alert variant="info" title="Maintenance Alert" onClose={() => setIsOpen(false)}>
The API server will undergo scheduled updates tonight at 12:00 AM UTC.
</Alert>
);
}The Alert component is built with React Aria and styled using StyleX. It supports multiple status variants, inline action buttons, close triggers, and rich custom layout slots.
Import
import { Alert } from '@moul-dev/ui';Variants
You can customize the type of alert using the variant prop:
Info Alert
This is a standard information notification.
Accent Alert
This is an accented information notification with a colored icon/title.
Success Alert
The operation completed successfully.
Warning Alert
This action might affect your configuration settings.
Error Alert
We encountered an issue connecting to the server.
Processing your request
Please wait while we perform the action.
<Alert variant="info" title="..." description="..." />
<Alert variant="accent" title="..." description="..." />
<Alert variant="success" title="..." description="..." />
<Alert variant="warning" title="..." description="..." />
<Alert variant="error" title="..." description="..." />
<Alert variant="loading" title="..." description="..." />Actions and Closable
Alerts can accept an optional inline action element or a close button using action and onClose props:
Update available
A new version is ready to install.
Profile updated successfully
<Alert
variant="accent"
title="Update available"
description="A new version is ready to install."
action={<Button variant="primary" size="sm">Refresh</Button>}
/>
<Alert
variant="success"
title="Profile updated successfully"
onClose={() => handleClose()}
/>Rich Content (Children)
You can pass custom children inside the Alert component to display nested lists, custom spacing, or elements:
Unable to connect to server
We're experiencing connection issues. Please try the following:
- Check your internet connection
- Refresh the page
- Clear your browser cache
import * as stylex from '@stylexjs/stylex';
import { Alert, Button, tokens } from '@moul-dev/ui';
const alertStyles = stylex.create({
container: {
marginTop: tokens.spacing2,
color: tokens.colorFgSubtle,
},
paragraph: {
margin: 0,
marginBottom: tokens.spacing1,
},
list: {
listStyleType: 'disc',
paddingInlineStart: tokens.spacing2,
margin: 0,
display: 'flex',
flexDirection: 'column',
},
});
export default function Example() {
return (
<Alert
variant="error"
title="Unable to connect to server"
action={<Button variant="danger" size="sm">Retry</Button>}
>
<div {...stylex.props(alertStyles.container)}>
<p {...stylex.props(alertStyles.paragraph)}>
We're experiencing connection issues. Please try the following:
</p>
<ul {...stylex.props(alertStyles.list)}>
<li>Check your internet connection</li>
<li>Refresh the page</li>
<li>Clear your browser cache</li>
</ul>
</div>
</Alert>
);
}