Alert
Alert displays prominent messages with severity styles and optional actions.
Source
LLM docs
Package
Examples
3
Properties
41
Playground
Basics
Use
severity to set it — it picks the matching color and icon automatically.Loading demo…
import { Alert, Block } from '@plocks/ui';
export function Demo() {
return (
<Block>
<Alert severity="info" title="Heads up">
Use alerts to highlight contextual information inline with page content.
</Alert>
<Alert severity="success" title="Profile saved">
Your changes were stored successfully.
</Alert>
<Alert severity="error" title="Connection issue">
Retry the action or check the status page for outages.
</Alert>
</Block>
);
}Variants
Compare light, outline, filled, and subtle variants to match alert prominence to the message.
Loading demo…
import { Alert, Block } from '@plocks/ui';
export function Demo() {
return (
<Block>
<Alert variant="light" color="primary" title="Light">
Balanced background and border treatment for inline notes.
</Alert>
<Alert variant="outline" color="success" title="Outline">
Subtle emphasis without increasing background contrast.
</Alert>
<Alert variant="filled" color="warning" title="Filled">
High-contrast option for urgent messaging.
</Alert>
<Alert variant="subtle" color="error" title="Subtle">
No background color, but tinted icon and text.
</Alert>
</Block>
);
}Dismissible
Add
withCloseButton and handle onClose to let users dismiss an alert.Loading demo…
import { useState } from 'react';
import { Alert, Button } from '@plocks/ui';
export function Demo() {
const [visible, setVisible] = useState(true);
if (!visible) {
return (
<Button variant="outline" onPress={() => setVisible(true)}>
Show alert
</Button>
);
}
return (
<Alert
severity="warning"
title="Draft warning"
withCloseButton
onClose={() => setVisible(false)}
>
Your draft is missing a title. Resolve before publishing.
</Alert>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources