@smashing/dialog

``sh
yarn add @smashing/dialog @smashing/button @smashing/portal
`

![Edit @smashing/dialog](https://codesandbox.io/s/smashingdialog-inuzv?fontsize=14)

#### Basic example

`jsx
setIsDialogVisible(true)}>Show dialog
isShown={isDialogVisible}
title="Example"
onCloseComplete={() => setIsDialogVisible()}
>
Hello world

`

#### Header and Footer without borders

`jsx
setIsDialogVisible(true)}>Show dialog
isShown={isDialogVisible}
title="Example"
onCloseComplete={() => setIsDialogVisible()}
isFooterSeparated={false}
isHeaderSeparated={false}
>
Hello world

`

#### Without Header and Footer

`jsx
setIsDialogVisible(true)}>Show dialog
isShown={isDialogVisible}
title="Example"
onCloseComplete={() => setIsDialogVisible()}
hasHeader={false}
hasFooter={false}
>
Hello world

`

#### Without Cancel button

`jsx
setIsDialogVisible(true)}>Show dialog
isShown={isDialogVisible}
title="Example"
onCloseComplete={() => setIsDialogVisible()}
hasCancel={false}
>
Hello world

`

#### Customized Cancel and Confirm buttons

`jsx
setIsDialogVisible(true)}>Show dialog
isShown={isDialogVisible}
title="Example"
onCloseComplete={() => setIsDialogVisible()}
cancelAppearance="minimal"
cancelLabel="Abort"
confirmAppearance="flat"
confirmLabel="Ok"
intent="success"
>
Hello world


`

#### Disabled Confirm button

`jsx
setIsDialogVisible(true)}>Show dialog
isShown={isDialogVisible}
title="Example"
onCloseComplete={() => setIsDialogVisible()}
isConfirmDisabled
>
Hello world

`

#### Custom max width

`jsx
setIsDialogVisible(true)}>Show dialog
isShown={isDialogVisible}
title="Example"
onCloseComplete={() => setIsDialogVisible()}
width={700}
>
Hello world

`

#### Handle onCancel and onConfirm

`jsx
setIsDialogVisible(true)}>Show dialog
isShown={isDialogVisible}
title="Example"
onCloseComplete={() => setIsDialogVisible()}
onCancel={close => {
console.log('cancel')
close()
}}
onConfirm={close => {
console.log('confirm')
close()
}}
>
Hello world

``