2.3.1 • Published 1 month ago
@spark-web/alert v2.3.1
title: Alert storybookPath: feedback-overlays-alert--info
isExperimentalPackage: true
Alert displays a short and concise message to draw a users' attention without interrupting their current task.
Examples
Tones
The component offers several levels of tonal severity.
<Stack gap="large">
<Alert tone="caution" heading="This is a caution alert">
Caution message
</Alert>
<Alert tone="positive" heading="This is a positive alert">
Positive message
</Alert>
<Alert tone="info" heading="This is an info alert">
Info message
</Alert>
<Alert tone="critical" heading="This is a critical alert">
Critical message
</Alert>
</Stack>
Closing
You can also set an onClose
prop callback function which will render a close
icon button on the alert. The callback function will be called upon the button
being pressed.
const [isOpen, setIsOpen] = React.useState(true);
React.useEffect(() => {
const timeout = setTimeout(() => {
if (!isOpen) {
setIsOpen(true);
}
}, 2000);
return () => clearTimeout(timeout);
}, [isOpen]);
if (!isOpen) {
return null;
}
return (
<Alert
tone="caution"
heading="This is a caution alert"
onClose={() => setIsOpen(false)}
>
Click the button on the right to dismiss this notification
</Alert>
);
Custom icons
In rare cases, you may need to provide a custom icon. To do so, we expose an
icon
prop. You can pass it any icon from the Icon package.
<Alert heading="This an info alert" icon={LightBulbIcon}>
Did you know that Alert components can have custom icons?
</Alert>
Props
2.3.1
1 month ago
2.3.0
4 months ago
0.0.0-snapshot-release-20220907053343
2 years ago
2.2.1
2 years ago
2.2.0
2 years ago
2.2.3
2 years ago
2.2.2
2 years ago
0.0.0-snapshot-release-20220906044408
2 years ago
1.0.7
2 years ago
2.1.0
2 years ago
2.0.0
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago