@kodiak-ui/dialog NPM

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.

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