Dialog
Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
| Install | yarn add @diallink-corp/convergo-react-dialog |
|---|---|
| Version | 4.1.2 |
| Usage | import {Dialog} from '@diallink-corp/convergo-react-dialog' |
Example
The Dialog component can be opened either through a DialogTrigger or a DialogContainer.
This is an example with the DialogTrigger component, which accepts a button and the dialog as a child.
<DialogTrigger>
<Button>Proceed</Button>
{(close) => (
<Dialog isDismissable>
<Header>
<Heading level={2}>Proceed with Action</Heading>
</Header>
<Content>
<Paragraph level={2}>
Do you want to proceed with your action?
</Paragraph>
</Content>
<Footer>
<ButtonGroup>
<Button variant="outlined" onPress={close}>
Cancel
</Button>
<Button variant="contained" onPress={close}>
Confirm
</Button>
</ButtonGroup>
</Footer>
</Dialog>
)}
</DialogTrigger><DialogTrigger>
<Button>Proceed</Button>
{(close) => (
<Dialog isDismissable>
<Header>
<Heading level={2}>Proceed with Action</Heading>
</Header>
<Content>
<Paragraph level={2}>
Do you want to proceed with your action?
</Paragraph>
</Content>
<Footer>
<ButtonGroup>
<Button variant="outlined" onPress={close}>
Cancel
</Button>
<Button variant="contained" onPress={close}>
Confirm
</Button>
</ButtonGroup>
</Footer>
</Dialog>
)}
</DialogTrigger><DialogTrigger>
<Button>
Proceed
</Button>
{(close) => (
<Dialog
isDismissable
>
<Header>
<Heading
level={2}
>
Proceed with
Action
</Heading>
</Header>
<Content>
<Paragraph
level={2}
>
Do you want
to proceed
with your
action?
</Paragraph>
</Content>
<Footer>
<ButtonGroup>
<Button
variant="outlined"
onPress={close}
>
Cancel
</Button>
<Button
variant="contained"
onPress={close}
>
Confirm
</Button>
</ButtonGroup>
</Footer>
</Dialog>
)}
</DialogTrigger>To programmatically open or close the Dialog, you can use the DialogContainer component.
function Example() {
const [isOpen, setOpen] = useState(false);
return (
<>
<Button variant="contained" onPress={() => setOpen(true)}>
Open Dialog
</Button>
<DialogContainer onDismiss={() => setOpen(false)}>
{isOpen && (
<Dialog>
<Header>
<Heading level={2}>Proceed with Action</Heading>
</Header>
<Content>
<Paragraph level={2}>
Do you want to proceed with your action?
</Paragraph>
</Content>
<Footer>
<ButtonGroup>
<Button variant="outlined" onPress={() => setOpen(false)}>
Cancel
</Button>
<Button variant="contained" onPress={() => setOpen(false)}>
Confirm
</Button>
</ButtonGroup>
</Footer>
</Dialog>
)}
</DialogContainer>
</>
);
}
function Example() {
const [isOpen, setOpen] = useState(false);
return (
<>
<Button
variant="contained"
onPress={() => setOpen(true)}
>
Open Dialog
</Button>
<DialogContainer onDismiss={() => setOpen(false)}>
{isOpen && (
<Dialog>
<Header>
<Heading level={2}>
Proceed with Action
</Heading>
</Header>
<Content>
<Paragraph level={2}>
Do you want to proceed with your action?
</Paragraph>
</Content>
<Footer>
<ButtonGroup>
<Button
variant="outlined"
onPress={() => setOpen(false)}
>
Cancel
</Button>
<Button
variant="contained"
onPress={() => setOpen(false)}
>
Confirm
</Button>
</ButtonGroup>
</Footer>
</Dialog>
)}
</DialogContainer>
</>
);
}
function Example() {
const [
isOpen,
setOpen
] = useState(false);
return (
<>
<Button
variant="contained"
onPress={() =>
setOpen(true)}
>
Open Dialog
</Button>
<DialogContainer
onDismiss={() =>
setOpen(false)}
>
{isOpen && (
<Dialog>
<Header>
<Heading
level={2}
>
Proceed
with
Action
</Heading>
</Header>
<Content>
<Paragraph
level={2}
>
Do you
want to
proceed
with your
action?
</Paragraph>
</Content>
<Footer>
<ButtonGroup>
<Button
variant="outlined"
onPress={() =>
setOpen(
false
)}
>
Cancel
</Button>
<Button
variant="contained"
onPress={() =>
setOpen(
false
)}
>
Confirm
</Button>
</ButtonGroup>
</Footer>
</Dialog>
)}
</DialogContainer>
</>
);
}
Sizes
The Dialog component supports several sizes.
<DialogTrigger>
<Button>Small</Button>
{(close) => (
<Dialog size="small">
<Header>
<Heading level={2}>Proceed with Action</Heading>
</Header>
<Content>
<Paragraph level={2}>
Do you want to proceed with your action?
</Paragraph>
</Content>
<Footer>
<ButtonGroup>
<Button variant="outlined" onPress={close}>
Cancel
</Button>
<Button variant="contained" onPress={close}>
Confirm
</Button>
</ButtonGroup>
</Footer>
</Dialog>
)}
</DialogTrigger><DialogTrigger>
<Button>Small</Button>
{(close) => (
<Dialog size="small">
<Header>
<Heading level={2}>Proceed with Action</Heading>
</Header>
<Content>
<Paragraph level={2}>
Do you want to proceed with your action?
</Paragraph>
</Content>
<Footer>
<ButtonGroup>
<Button variant="outlined" onPress={close}>
Cancel
</Button>
<Button variant="contained" onPress={close}>
Confirm
</Button>
</ButtonGroup>
</Footer>
</Dialog>
)}
</DialogTrigger><DialogTrigger>
<Button>
Small
</Button>
{(close) => (
<Dialog size="small">
<Header>
<Heading
level={2}
>
Proceed with
Action
</Heading>
</Header>
<Content>
<Paragraph
level={2}
>
Do you want
to proceed
with your
action?
</Paragraph>
</Content>
<Footer>
<ButtonGroup>
<Button
variant="outlined"
onPress={close}
>
Cancel
</Button>
<Button
variant="contained"
onPress={close}
>
Confirm
</Button>
</ButtonGroup>
</Footer>
</Dialog>
)}
</DialogTrigger><DialogTrigger>
<Button>Medium</Button>
{(close) => (
<Dialog size="medium">
<Header>
<Heading level={2}>Proceed with Action</Heading>
</Header>
<Content>
<Paragraph level={2}>
Do you want to proceed with your action?
</Paragraph>
</Content>
<Footer>
<ButtonGroup>
<Button variant="outlined" onPress={close}>
Cancel
</Button>
<Button variant="contained" onPress={close}>
Confirm
</Button>
</ButtonGroup>
</Footer>
</Dialog>
)}
</DialogTrigger><DialogTrigger>
<Button>Medium</Button>
{(close) => (
<Dialog size="medium">
<Header>
<Heading level={2}>Proceed with Action</Heading>
</Header>
<Content>
<Paragraph level={2}>
Do you want to proceed with your action?
</Paragraph>
</Content>
<Footer>
<ButtonGroup>
<Button variant="outlined" onPress={close}>
Cancel
</Button>
<Button variant="contained" onPress={close}>
Confirm
</Button>
</ButtonGroup>
</Footer>
</Dialog>
)}
</DialogTrigger><DialogTrigger>
<Button>
Medium
</Button>
{(close) => (
<Dialog size="medium">
<Header>
<Heading
level={2}
>
Proceed with
Action
</Heading>
</Header>
<Content>
<Paragraph
level={2}
>
Do you want
to proceed
with your
action?
</Paragraph>
</Content>
<Footer>
<ButtonGroup>
<Button
variant="outlined"
onPress={close}
>
Cancel
</Button>
<Button
variant="contained"
onPress={close}
>
Confirm
</Button>
</ButtonGroup>
</Footer>
</Dialog>
)}
</DialogTrigger><DialogTrigger>
<Button>Large</Button>
{(close) => (
<Dialog size="large">
<Header>
<Heading level={2}>Proceed with Action</Heading>
</Header>
<Content>
<Paragraph level={2}>
Do you want to proceed with your action?
</Paragraph>
</Content>
<Footer>
<ButtonGroup>
<Button variant="outlined" onPress={close}>
Cancel
</Button>
<Button variant="contained" onPress={close}>
Confirm
</Button>
</ButtonGroup>
</Footer>
</Dialog>
)}
</DialogTrigger><DialogTrigger>
<Button>Large</Button>
{(close) => (
<Dialog size="large">
<Header>
<Heading level={2}>Proceed with Action</Heading>
</Header>
<Content>
<Paragraph level={2}>
Do you want to proceed with your action?
</Paragraph>
</Content>
<Footer>
<ButtonGroup>
<Button variant="outlined" onPress={close}>
Cancel
</Button>
<Button variant="contained" onPress={close}>
Confirm
</Button>
</ButtonGroup>
</Footer>
</Dialog>
)}
</DialogTrigger><DialogTrigger>
<Button>
Large
</Button>
{(close) => (
<Dialog size="large">
<Header>
<Heading
level={2}
>
Proceed with
Action
</Heading>
</Header>
<Content>
<Paragraph
level={2}
>
Do you want
to proceed
with your
action?
</Paragraph>
</Content>
<Footer>
<ButtonGroup>
<Button
variant="outlined"
onPress={close}
>
Cancel
</Button>
<Button
variant="contained"
onPress={close}
>
Confirm
</Button>
</ButtonGroup>
</Footer>
</Dialog>
)}
</DialogTrigger>