Modal

A Modal is a dialog that appears on top of the main content. It has a header with a title, optional subtitle and icon, a body, and an optional footer, and fades in and out via the Base UI transition lifecycle.

Usage

import { Button, Modal } from '@workflowbuilder/ui';
import { useState } from 'react';

function Example() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="primary" onClick={() => setOpen(true)}>
        Open modal
      </Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Example modal"
        subtitle="Rendered live from @workflowbuilder/ui"
        footer={
          <Button variant="primary" onClick={() => setOpen(false)}>
            Got it
          </Button>
        }
      >
        Modal body content.
      </Modal>
    </>
  );
}

Props

Also accepts every standard <div> attribute (onChange, placeholder, aria-*, …); they are forwarded to the underlying element.

openrequired

Typeboolean

Controls the visibility of the modal

titlerequired

Typestring

Title displayed in the modal header

children

TypeReactNode

Content to be displayed in the modal body

closeLabel

Typestring

Default'Close'

Accessible label for the close button

footer

TypeReactNode

Content to be displayed in the modal footer

footerVariant

TypeModalFooterVariant

Default'integrated'

Variant of the footer styling

icon

TypeReact.ReactNode

Icon the component shows; `IconSwitch` shows it in the off state.

onClose

Type() => void

Callback function called when the modal is closed

size

Type'regular' | 'large'

Default'regular'

Size variant of the modal

subtitle

Typestring

Optional subtitle displayed below the title

CSS variables

Color

--wb-public-modal-background

--wb-public-modal-backdrop-background

--wb-public-modal-header-background

--wb-public-modal-header-border-color

--wb-public-modal-title-color

--wb-public-modal-description-color

--wb-public-modal-icon-background

--wb-public-modal-icon-color

--wb-public-modal-content-background

--wb-public-modal-footer-border-color

Size

--wb-public-modal-width

--wb-public-modal-border-radius

--wb-public-modal-padding

--wb-public-modal-description-size

--wb-public-modal-description-line-height

--wb-public-modal-icon-padding

--wb-public-modal-content-padding

--wb-public-modal-footer-padding

--wb-public-modal-large-width

--wb-public-modal-large-padding

--wb-public-modal-large-title-size

--wb-public-modal-large-title-line-height

--wb-public-modal-large-icon-padding

--wb-public-modal-box-shadow

--wb-public-modal-gap

--wb-public-modal-gap-large

--wb-public-modal-icon-border-radius

--wb-public-modal-icon-border-radius-large

--wb-public-modal-content-gap