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.