Installation
npm install @marmoui/uiyarn add @marmoui/uipnpm add @marmoui/uibun add @marmoui/uiUsage
import { Alert, AlertIcon, AlertContent, AlertTitle, AlertDescription, AlertAction } from '@marmoui/ui';Examples
Default Alert
Default
Standard informational alert
Heads up
You can add components to your app using the CLI.
<Alert>
<AlertContent>
<AlertTitle>Heads up</AlertTitle>
<AlertDescription>You can add components to your app using the CLI.</AlertDescription>
</AlertContent>
</Alert>Variants
Alert Variants
Different variants for different severity levels
Default
A neutral informational message.
Info
Your trial expires in 7 days.
Success
Your campaign has been published.
Warning
This action will affect 1,200 contacts.
Error
Failed to save changes. Please try again.
<div className="flex flex-col gap-3">
<Alert variant="default">
<AlertContent>
<AlertTitle>Default</AlertTitle>
<AlertDescription>A neutral informational message.</AlertDescription>
</AlertContent>
</Alert>
<Alert variant="info">
<AlertIcon><MdInfoOutline /></AlertIcon>
<AlertContent>
<AlertTitle>Info</AlertTitle>
<AlertDescription>Your trial expires in 7 days.</AlertDescription>
</AlertContent>
</Alert>
<Alert variant="success">
<AlertIcon><MdCheckCircleOutline /></AlertIcon>
<AlertContent>
<AlertTitle>Success</AlertTitle>
<AlertDescription>Your campaign has been published.</AlertDescription>
</AlertContent>
</Alert>
<Alert variant="warning">
<AlertIcon><MdWarningAmber /></AlertIcon>
<AlertContent>
<AlertTitle>Warning</AlertTitle>
<AlertDescription>This action will affect 1,200 contacts.</AlertDescription>
</AlertContent>
</Alert>
<Alert variant="destructive">
<AlertIcon><MdErrorOutline /></AlertIcon>
<AlertContent>
<AlertTitle>Error</AlertTitle>
<AlertDescription>Failed to save changes. Please try again.</AlertDescription>
</AlertContent>
</Alert>
</div>With Action
Alert with Action
Alert with an action button
Dark mode is now available
Enable it under your profile settings to get started.
<Alert>
<AlertIcon><MdDarkMode /></AlertIcon>
<AlertContent>
<AlertTitle>Dark mode is now available</AlertTitle>
<AlertDescription>Enable it under your profile settings to get started.</AlertDescription>
<AlertAction>
<Button size="xs" variant="secondary">Enable</Button>
</AlertAction>
</AlertContent>
</Alert>Multiple Actions
Alert with multiple action buttons
New version available
Version 3.2 is ready to install. Review the changelog before updating.
<Alert variant="warning" closable>
<AlertIcon><MdUpdate /></AlertIcon>
<AlertContent>
<AlertTitle>New version available</AlertTitle>
<AlertDescription>Version 3.2 is ready to install. Review the changelog before updating.</AlertDescription>
<AlertAction>
<Button size="xs" variant="secondary">Update now</Button>
<Button size="xs" variant="ghost">Later</Button>
</AlertAction>
</AlertContent>
</Alert>Custom Icons
Use any Material Design icon (or any SVG) inside AlertIcon.
Custom Icons
Alerts with your own icons
New feature launched
A/B testing is now available for all Pro plans.
Backup complete
All your data has been backed up successfully.
Payment method expiring
Your Visa ending in 4242 expires next month.
Security alert
Unusual login detected from a new device.
<div className="flex flex-col gap-3">
<Alert variant="info">
<AlertIcon className="text-ink-info"><MdRocketLaunch /></AlertIcon>
<AlertContent>
<AlertTitle>New feature launched</AlertTitle>
<AlertDescription>A/B testing is now available for all Pro plans.</AlertDescription>
</AlertContent>
</Alert>
<Alert variant="success">
<AlertIcon className="text-success-solid"><MdBackup /></AlertIcon>
<AlertContent>
<AlertTitle>Backup complete</AlertTitle>
<AlertDescription>All your data has been backed up successfully.</AlertDescription>
</AlertContent>
</Alert>
<Alert variant="warning">
<AlertIcon className="text-ink-orange"><MdCreditCard /></AlertIcon>
<AlertContent>
<AlertTitle>Payment method expiring</AlertTitle>
<AlertDescription>Your Visa ending in 4242 expires next month.</AlertDescription>
<AlertAction>
<Button size="xs" variant="secondary">Update card</Button>
<Button size="xs" variant="ghost">Dismiss</Button>
</AlertAction>
</AlertContent>
</Alert>
<Alert variant="destructive">
<AlertIcon className="text-destructive-solid"><MdSecurity /></AlertIcon>
<AlertContent>
<AlertTitle>Security alert</AlertTitle>
<AlertDescription>Unusual login detected from a new device.</AlertDescription>
</AlertContent>
</Alert>
</div>Description Only
Description Only
Alert without a title for simpler messages
Your settings have been updated.
<Alert variant="info">
<AlertIcon><MdInfoOutline /></AlertIcon>
<AlertContent>
<AlertDescription>Your settings have been updated.</AlertDescription>
</AlertContent>
</Alert>Closable
Closable Alert
Alert with a close button
Warning
This action will affect 1,200 contacts.
<Alert variant="warning" closable>
<AlertIcon><MdWarningAmber /></AlertIcon>
<AlertContent>
<AlertTitle>Warning</AlertTitle>
<AlertDescription>This action will affect 1,200 contacts.</AlertDescription>
</AlertContent>
</Alert>Best Practices
Use appropriate variants
Match the alert variant to the severity: info for neutral information, success for confirmations, warning for caution, destructive for errors.
Keep messages concise
Write clear, actionable alert messages. Include what happened and what the user should do next.
Don't overuse alerts
Too many alerts on a page create noise. Reserve alerts for genuinely important information.
Don't use for transient messages
Use Toast for temporary feedback. Alerts should persist and be relevant to the current view.
Props
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'info' | 'success' | 'warning' | 'destructive' | 'default' | Alert style variant |
closable | boolean | false | Show a close button |
onClose | () => void | - | Callback when close button is clicked |
className | string | - | Additional className |
AlertIcon
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Icon element (auto-sized to 32px) |
className | string | - | Additional className (use for icon color, e.g. text-ink-info) |
AlertContent
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | AlertTitle, AlertDescription, AlertAction |
className | string | - | Additional className |
AlertTitle
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Title text |
className | string | - | Additional className |
AlertDescription
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Description text |
className | string | - | Additional className |
AlertAction
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Action buttons or links |
className | string | - | Additional className |
Accessibility
ARIA Roles
Alerts use the alert role by default, which causes screen readers to announce the content immediately. Use role="status" for non-urgent updates.
- Alerts are announced by screen readers when they appear in the DOM.
- Use descriptive text that makes sense without visual context.
- Ensure sufficient color contrast between alert variants and their text.
- Don't rely solely on color to convey meaning; always include text.