DialogControls

This component is a utility component designed for the Dialog component.

Expand code


<Button variant={'outlined'} dark={dark} onClick={() => setIsVisible(true)}>Show Dialog</Button>
 
<Dialog size={'small'} open={isVisible} onCancel={() => setIsVisible(false)} dark={dark}>
  <DialogTitle>Title</DialogTitle>
 
  <DialogContent>
    Dialog content
  </DialogContent>
 
  <DialogControls>
    <Button variant={'text'} onClick={() => {setIsVisible(false)}}>Confirm</Button>
    <Button variant={'text'} color={'error'} onClick={() => {setIsVisible(false)}}>Cancel</Button>
  </DialogControls>
</Dialog>

Since dialogContent is a utility component, using it outside the dialog component will just render the content of the component:


<DialogControls>
  <Button variant={'filled'}>Button</Button>
</DialogControls>

Position

The position of the children can be either start, end or space-between.

Expand code


<Button variant={'outlined'} dark={dark} onClick={() => setIsVisible(true)}>Show Dialog</Button>
 
<Dialog size={'small'} open={isVisible} onCancel={() => setIsVisible(false)} dark={dark}>
  <DialogTitle>Title</DialogTitle>
 
  <DialogContent>
    Dialog content
  </DialogContent>
 
  <DialogControls position={'start'}> // one of 'start' | 'end' | 'space-between'
    <Button variant={'text'} onClick={() => {setIsVisible(false)}}>Confirm</Button>
    <Button variant={'text'} color={'error'} onClick={() => {setIsVisible(false)}}>Cancel</Button>
  </DialogControls>
</Dialog>

Props

Name	Type	Default	Description
children	`node`	-	Content of the component
position	`start` \| `end` \| `space-between`	end	Position of the children