Get Started

Components

accordion alert avatar breadcrumb button checkbox dropdown input label modal pagination radio select sheet skeleton switch table textarea toast

Modal

A window overlaid on either the primary window or another modal window, rendering the content underneath inert.

code

Expend code


  <Modal>
      <ModalTrigger>
          <Button type="button" variant="outlined">
              Modal open
          </Button>
      </ModalTrigger>
      <ModalContent>
          <ModalHeader>
              <ModalTitle>Edit profile</ModalTitle>
              <ModalDescription>Make changes to your profile here. Click save when you're done.</ModalDescription>
          </ModalHeader>
              <div className='flex gap-2 items-center'>
                  <Label className='w-20'>Name</Label>
                  <Input placeholder="Name" />
              </div>
          <ModalFooter>
              <ModalClose>
                  <Button type="button" variant="contained">
                      close
                  </Button>
              </ModalClose>
          </ModalFooter>
      </ModalContent>
  </Modal>


  <Modal>
      <ModalTrigger>
          <Button type="button" variant="outlined">
              Modal open
          </Button>
      </ModalTrigger>
      <ModalContent>
          <ModalHeader>
              <ModalTitle>Edit profile</ModalTitle>
              <ModalDescription>Make changes to your profile here. Click save when you're done.</ModalDescription>
          </ModalHeader>
              <div className='flex gap-2 items-center'>
                  <Label className='w-20'>Name</Label>
                  <Input placeholder="Name" />
              </div>
          <ModalFooter>
              <ModalClose>
                  <Button type="button" variant="contained">
                      close
                  </Button>
              </ModalClose>
          </ModalFooter>
      </ModalContent>
  </Modal>

Modal

Contains all the parts of a modal.

Prop	Type	Default	Description
defaultOpen	boolean	false	The open state of the modal when it is initially rendered.
children	node	-	The content of the component.

ModalTrigger

The button that opens the modal.

Prop	Type	Default	Description
children	node	-	The content of the component.

ModalContent

Contains content to be rendered in the open modal.

Prop	Type	Default	Description
children	node	-	The content of the component.

ModalHeader

Contains header to be rendered in the open modal.

Prop	Type	Default	Description
children	node	-	The content of the component.

ModalTitle

An accessible title to be announced when the modal is opened.

Prop	Type	Default	Description
children	node	-	The content of the component.

ModalDescription

An optional accessible description to be announced when the modal is opened.

Prop	Type	Default	Description
children	node	-	The content of the component.

ModalFooter

Contains footer to be rendered in the open modal.

Prop	Type	Default	Description
children	node	-	The content of the component.

ModalClose

The button that closes the modal.

Prop	Type	Default	Description
children	node	-	The content of the component.