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 |