Dashboard UI Kit

Apps PreviewDownload Design Package

    Table of contents

  1. Example
  2. Prop Table

Modal

import { Modal } from '@duik/it'
import Modal from '@duik/modal'

Dashboard UI Kit gives you several components to effectively build nice and clean modals. Modals can be used anywhere in the code structure, the actuall DOM will be rendered in the body with help of react portal.

Can you guess the place?

mountains

<Modal
  isOpen={modalOpenState.isOpen}
  handleClose={modalOpenState.handleClose}
  closeOnOuterClick
  sm
>
  <Modal.Header>
    <Modal.Title>Can you guess the place?</Modal.Title>
  </Modal.Header>
  <img
    src="https://images.unsplash.com/photo-1587732608058-5ccfedd3ea63?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
    style={{
      width: '100%',
    }}
  />
  <Modal.Body>
    <FormGroupContainer>
      <Radio name="question_1" label="Wyoming, US" />
      <Radio name="question_1" label="Dolomiti, Italy" />
      <Radio name="question_1" label="Pamir, Tajikistan" />
    </FormGroupContainer>
  </Modal.Body>
  <Modal.Footer>
    <Button primary>Submit Answer</Button>
  </Modal.Footer>
</Modal>
ReactHTML Snippet

Prop table

className

Required: false

type: string
className, e.g. "my-custom-styling"
sm

Required: false

type: boolean
Renders smaller modal of width up to 560px (default 760px)
lg

Required: false

type: boolean
Renders larger modal of width up to 1200px (default 760px)
full

Required: false

type: boolean
Renders modal that will fill the width of the screen (default 760px)
isOpen

Required: false

type: boolean
Boolean property whether is the modal opened or not
jumbo

Required: false

type: boolean
Renders larger avatar with height 120px
handleClose

Required: false

type: () => void

default value: undefined

Provide a handler when it is required to close the window, e.g. on close button.
hideCloseButton

Required: false

type: boolean
Hides the close button
closeOnOuterClick

Required: false

type: boolean
handleClose will be triggered when user clicks outside the modal
portalEl

Required: false

type: HTMLElement

default value: document.body

By default modal will be rendered in <body>, you can provide a different dom element to be rendered in.
...rest

Required: false

type: any
Other properties are passed down to the wrapping element