Dialog

Accessible dialog based on Reach UI's Dialog.

Usage

import { Dialog } from '@binarycapsule/ui-capsules';

Demo

View source on GitHub

Knobs 🎛

isOpen

title

message

contentLabel

variant

warning

<Dialog
  isOpen={false}
  variant="warning"
  onRequestClose={() => setIsOpen(false)}
  contentLabel="Example dialog"
  actions={[
    {
      text: 'Cancel',
      variant: 'neutral',
      onClick: () => setIsOpen(false),
    },
    {
      text: 'Delete file',
      variant: 'error',
      onClick: () => alert('Delete action called'),
    },
  ]}
  title={Delete file}
  message={Are you sure you want to delete this file?}
/>

Props

Name	Description
isOpen Required	boolean The open state of the dialog.
actions Required	Action[] An array of objects. Each object represents an action in the Dialog footer (see example above).
contentLabel Required	string String indicating how the content container should be announced to screen-readers.
onClose Required	function Function that closes the Dialog.
title	string(Default: undefined) The title of the dialog.
message Required	string The message that is displayed inside the dialog.

Note:

This component accepts all props from DialogOverlay props. Please refer to the Reach UI docs for more information.