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

Basic example

<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
  isShown={isDialogVisible}
  title="Example"
  onCloseComplete={() => setIsDialogVisible()}
>
  Hello world
</Dialog>

Header and Footer without borders

<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
  isShown={isDialogVisible}
  title="Example"
  onCloseComplete={() => setIsDialogVisible()}
  isFooterSeparated={false}
  isHeaderSeparated={false}
>
  Hello world
</Dialog>

Without Header and Footer

<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
  isShown={isDialogVisible}
  title="Example"
  onCloseComplete={() => setIsDialogVisible()}
  hasHeader={false}
  hasFooter={false}
>
  Hello world
</Dialog>

Without Cancel button

<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
  isShown={isDialogVisible}
  title="Example"
  onCloseComplete={() => setIsDialogVisible()}
  hasCancel={false}
>
  Hello world
</Dialog>

Customized Cancel and Confirm buttons

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

Disabled Confirm button

<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
  isShown={isDialogVisible}
  title="Example"
  onCloseComplete={() => setIsDialogVisible()}
  isConfirmDisabled
>
  Hello world
</Dialog>

Custom max width

<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
  isShown={isDialogVisible}
  title="Example"
  onCloseComplete={() => setIsDialogVisible()}
  width={700}
>
  Hello world
</Dialog>

Handle onCancel and onConfirm

<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
  isShown={isDialogVisible}
  title="Example"
  onCloseComplete={() => setIsDialogVisible()}
  onCancel={close => {
    console.log('cancel')
    close()
  }}
  onConfirm={close => {
    console.log('confirm')
    close()
  }}
>
  Hello world
</Dialog>