@seragam-ui/dialog v1.1.10

@seragam-ui/dialog

A Quick description of the component

Installation

yarn add @seragam-ui/dialog
# or
npm i @seragam-ui/dialog

Usage

import {
  Dialog,
  DialogContent,
  DialogAction,
  DialogCancel,
  DialogDescription,
  DialogTitle,
  DialogProps,
  DialogOverlay,
} from '@seragam-ui/dialog'

const App = () => {
  const [isOpen, setOpen] = React.useState(false)

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Dialog</button>

      <Dialog isOpen={isOpen} size="md" onClose={() => setOpen(false)}>
        <DialogOverlay />
        <DialogContent>
          <div
            style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              flexDirection: 'column',
            }}
          >
            <DialogTitle style={{ margin: '6px 0', textAlign: 'center' }}>
              dialog title
            </DialogTitle>
            <DialogDescription style={{ textAlign: 'center', margin: '6px 0' }}>
              dialog description
            </DialogDescription>

            <DialogCancel
              style={{
                margin: '6px 0',
                width: '100%',
                background: 'transparent',
                border: 'none',
                fontWeight: 'bold',
              }}
              onClick={() => setOpen(false)}
            >
              Nah!
            </DialogCancel>
            <DialogAction style={{ margin: '6px 0', width: '100%' }}>
              Sure, delete him!
            </DialogAction>
          </div>
        </DialogContent>
      </Dialog>
    </>
  )
}