Basic Usage Live Preview

setInitialRoutes(["/"]);
// visible-block-start
import { useNotification } from "@refinedev/core";
import { Button, Stack } from "@mui/material";

const ExamplePage: React.FC = () => {
  const { open, close } = useNotification();

  return (
    <Stack spacing={2} direction="row">
      <Button
        color="success"
        variant="outlined"
        size="small"
        onClick={() =>
          open?.({
            type: "success",
            message: "Success",
            description: "Success description",
          })
        }
      >
        Success
      </Button>
      <Button
        color="error"
        variant="outlined"
        size="small"
        onClick={() =>
          open?.({
            type: "error",
            message: "Error",
            description: "Error description",
          })
        }
      >
        Error
      </Button>

      <Button
        color="secondary"
        variant="outlined"
        size="small"
        onClick={() =>
          open?.({
            type: "progress",
            message: "Progress",
            undoableTimeout: 5,
            cancelMutation: () => {
              alert("cancelMutation");
            },
          })
        }
      >
        Progress
      </Button>
    </Stack>
  );
};
// visible-block-end
render(
  <ReactRouter.BrowserRouter>
    <RefineMuiDemo resources={[]}>
      <ReactRouter.Routes>
        <ReactRouter.Route
          index
          element={
            <div style={{ padding: 24 }}>
              <ExamplePage />
            </div>
          }
        />
      </ReactRouter.Routes>
    </RefineMuiDemo>
  </ReactRouter.BrowserRouter>,
);