<Modal />

Renders Modal


import { Modal, ModalProps, ModalInline } from '@admin-bro/design-system'

Modal can be rendered either inline or as a regular Modal.

Inline usage

  <ModalInline {...modalProps} />

Modal usage

const [isVisible, setIsVisible] = useState(false)
modalProps = {
  /** ... **/
  onOverlayClick: () => setIsVisible(false),
  onClose: () => setIsVisible(false),

  <Label>Modal Trigger</Label>
    onClick={() => setIsVisible(!isVisible)}
    Toggle Modal
  {isVisible && <Modal {...modalProps} />}

Passing content

You can also pass the values in 2 ways:

  1. by using just the ModalProps - as shown in the previous examples.
  2. by using the Children


Let me show you 3 live examples of using the Modal component:

Passing children

The most versatile way, but, the one, which requires you to "design" the modal

Passing props

You have everything out of the box

Real modal

Handling modal visibility with the useState hook.

  • In version 3.3

View Source admin-bro-design-system/src/molecules/modal/modal.tsx, line 15


Type Definitions


# ModalProps

Props passed to Modal Component

Name Type Attributes Description
title string <optional>

dialog title

subTitle string <optional>

optional subtitle

variant VariantType <optional>

color variant

buttons Array.<ButtonProps> <optional>

Modal footer buttons

label string <optional>

Label which is seen above the text

icon string <optional>

Icon near the label

onOverlayClick function <optional>

Handler function triggered when overlay is clicked

onClose function <optional>

Function triggered when user clicks close button., If it is given - close button will appear.

View Source admin-bro-design-system/src/molecules/modal/modal-props.ts, line 4


Proudly built and maintained by SoftwareBrothers

Software House with a passion for both JavaScript and TypeScript.

See what we do See what we believe in

Proudly built and maintained by