logo

FUSE

DOCS

Components

Fuse Components

PurchaseBack to the Dashboard

FuseDialog

FuseDialog is a simple dialog trigger for easily showing dialog messages. It should be located in the theme layouts.

Usage

You can show a dialog anywhere by using the openDialog function from the useFuseDialog hook:

import { useFuseDialog } from '@fuse/core/FuseDialog/FuseDialogContext';

function MyComponent() {
    const { openDialog, closeDialog } = useFuseDialog();
    
    const handleOpenDialog = () => {
        openDialog({
            id: 'my-dialog',
            content: ({ handleClose }) => (
                <>
                    <DialogTitle>Use Google's location service?</DialogTitle>
                    <DialogContent>
                        <DialogContentText>
                            Let Google help apps determine location. This means sending anonymous location data to
                            Google, even when no apps are running.
                        </DialogContentText>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={handleClose} color="primary">
                            Disagree
                        </Button>
                        <Button onClick={handleClose} color="primary" autoFocus>
                            Agree
                        </Button>
                    </DialogActions>
                </>
            )
        });
    };

    return (
        <Button
            onClick={handleOpenDialog}
            variant="contained"
            color="secondary"
        >
            Open Dialog
        </Button>
    );
}
Dialog Props

The openDialog function accepts the following props:

interface FuseDialogProps {
    id: string;                                  // Unique identifier for the dialog
    open?: boolean;                              // Control dialog visibility
    onClose?: (id: string) => void;              // Custom close handler
    content: (props: {                           // Render function for dialog content
        handleClose: () => void;                 // Function to close the dialog
        data?: unknown;                          // Optional data to pass to the content
    }) => ReactNode;
    data?: unknown;                              // Optional data
    classes?: { paper?: string };                // Optional styling classes
}
Example