The icon defaults to visible, pass showIcon={false} to hide it.
live
<Stack direction="column" spacing="400">
<Alert>An informational alert</Alert>
<Alert showIcon={false}>An informational alert with no icon</Alert>
</Stack>
Size
A smaller alert is available by setting size to small. The smaller size
works well inline in forms.
live
<Stack direction="column" spacing="400">
<Alert status="error">Something broke</Alert>
<Alert status="error" size="small">
Incorrect username or password
</Alert>
</Stack>
Confirmation
Optionally, pass onConfirmClick to display a button for triggering an action
associated with the Alert.
live
<Stack direction="column" spacing="400">
<Alert
onConfirmClick={() => alert('✅')}
status="warning"
title="Something happened!"
>
You should confirm it because of these details
</Alert>
<Alert
onCloseClick={() => alert('💨')}
onConfirmClick={() => alert('✅')}
status="warning"
title="Something happened!"
>
You should confirm it because of these details (or close it)
</Alert>
<Divider />
<Alert
confirmText="Try Again"
onConfirmClick={() => alert('♻️')}
size="small"
status="error"
title="Something broke!"
>
You should try this instead because of these details
</Alert>
<Alert
confirmText="Try Again"
onCloseClick={() => alert('💨')}
onConfirmClick={() => alert('♻️')}
size="small"
status="error"
title="Something broke!"
>
You should try this instead because of these details (or close it)
</Alert>
</Stack>
Close
Pass onCloseClick to enable the close button. Actually hiding the Alert
requires wiring up some state.
live
() => {
const [isOpen, { off }] = useBoolean(true);
return (
<Stack direction="column" spacing="400">
<Alert onCloseClick={() => alert('💨')}>I have a close button</Alert>
<Alert
onCloseClick={() => alert('💨')}
title="I have a title and a close button"
>
Here's why you might <em>not</em> want to close me
</Alert>
<Divider />
{isOpen ? (
<Alert onCloseClick={off}>
I have a close button <em>and</em> you can close me
</Alert>
) : (
<Panel bg="transparent" textAlign="center">
Poof 💨
</Panel>
)}
</Stack>
);
};
Loading
Set status to loading to display a pending state while something is
processing. Usually this would be followed by an Alert with the proper
status to indicate the result of the action.