Back to Refine

Basic Usage Live Preview

documentation/versioned_docs/version-4.xx.xx/notification/hooks/use-notification/basic-usage-live-preview.md

3.25.01.5 KB
Original Source
tsx
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
setRefineProps({
  DashboardPage: () => <ExamplePage />,
  resources: [
    {
      name: "post",
      create: () => {},
    },
  ],
});
render(<RefineMuiDemo />);