@kodiak-ui/dialog

Dialog

Dialogs are windows that appear on top of the user interface and will block interaction from the UI until the dialog is closed or interacted with.

• Source: https://github.com/skyverge/kodiak-ui/tree/master/packages/dialog
• NPM: https://www.npmjs.com/package/@kodiak-ui/dialog

Note the isolation: unset may need to be passed in via sx prop.

Install and usage

yarn add @kodiak-ui/dialog

import { useDialog, Dialog } from '@kodiak-ui/dialog'

Example

import { SharedSx } from 'kodiak-ui'
import { Dialog, useDialog } from '@kodiak-ui/dialog'
import { Button, Content, Footer, Header } from '@kodiak-ui/primitives'

const { getDialogProps, handleOpenDialog, handleCloseDialog } = useDialog()

<Button onClick={handleOpenDialog}>Trigger</Button>

<Dialog {...getDialogProps()}>
  <SharedSx sx={{ px: 5, py: 4 }}>
    <Header variants="dialog-header">Header</Header>
    <Content>
      <Text as="p">
        Contrary to popular belief, Lorem Ipsum is not simply random text.
        It has roots in a piece of classical Latin literature from 45 BC,
        making it over 2000 years old.
      </Text>
    </Content>
    <Footer variants="dialog-footer">
      <Button variants="secondary" onClick={handleCloseDialog}>
        Cancel
      </Button>
      <Button variants="danger">Proceed</Button>
    </Footer>
  </SharedSx>
</Dialog>

Props

These props are returned by the useDialog hook but can be passed in manually to control the Dialog state.

Name	Type	Default	Description
children*	ReactNode	-	The content of the dialog
title	string	-	The title of the dialog, used for a11y and optional
isOpen	boolean	false	Determines whether the dialog is open or not
onDismiss	() => void	-	Handler that is called when the cancel or "X" button is clicked
variants	string or array	-	The variant names to apply to the dialog, must be defined with the variant method
role	'dialog' or 'alertdialog'	'dialog'	Accessibility role value of the dialog
id	string	-	The Dialog's unique ID
aria-label	string	-	String value that labels the current dialog element
aria-labelledby	string	-	The ID of the element(s) that label/define the dialog element
aria-modal	boolean	true	Adds accessibility support to hide all other elements from screen readers