React Dialog components for Fluent UI React
To import React Dialog components:
import * as React from 'react';
import {
Button,
Dialog,
DialogTrigger,
DialogSurface,
DialogTitle,
DialogBody,
DialogActions,
DialogContent,
} from '@fluentui/react-components';
export const DialogExample = () => {
return (
<Dialog>
<DialogTrigger>
<Button>Open dialog</Button>
</DialogTrigger>
<DialogSurface>
<DialogBody>
<DialogTitle>Dialog title</DialogTitle>
<DialogContent>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque
est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure
cumque eaque?
</DialogContent>
<DialogActions>
<DialogTrigger>
<Button appearance="secondary">Close</Button>
</DialogTrigger>
<Button appearance="primary">Do Something</Button>
</DialogActions>
</DialogBody>
</DialogSurface>
</Dialog>
);
};