Alert Dialog
An alert dialog is the simplest form of dialog that conveys information to the user. It provides only a confirmation button and has no return value.
Basic Alert#
The simplest form of alert:
grunfeld.add(() => (
<div style={{ padding: "20px", background: "white", borderRadius: "8px" }}>
<p>This is an alert message</p>
<button onClick={() => grunfeld.remove()}>OK</button>
</div>
));
Success Alert#
An alert notifying task completion:
grunfeld.add(() => ({
element: (
<div style={{ padding: "20px", background: "white", borderRadius: "8px" }}>
<h3>✅ Success</h3>
<p>Save completed!</p>
<button onClick={() => grunfeld.remove()}>OK</button>
</div>
),
position: "top-right",
}));
Error Alert#
An alert displaying error messages:
grunfeld.add(() => ({
element: (
<div style={{
padding: "20px",
background: "#fee",
borderRadius: "8px",
border: "2px solid #c00"
}}>
<h3>❌ Error</h3>
<p>Unable to perform operation</p>
<button onClick={() => grunfeld.remove()}>OK</button>
</div>
),
backdropStyle: {
backgroundColor: "rgba(255, 0, 0, 0.1)",
},
}));
Auto-dismissing Alert#
An alert that automatically closes after a certain time:
const showToast = (message: string) => {
grunfeld.add(() => ({
element: (
<div style={{
padding: "16px 24px",
background: "#333",
color: "white",
borderRadius: "8px",
}}>
{message}
</div>
),
position: "bottom-center",
lightDismiss: false,
}));
// Auto-remove after 3 seconds
setTimeout(() => {
grunfeld.remove();
}, 3000);
};
// Usage
showToast("Copied!");
This pattern is useful for toast notifications or temporary messages.