Modal

Basic Modal

The Modal positions itself on top of other content, with an overlay, often used to add/edit information, feedback, show more information, and more.

<Modal>Hello, world!</Modal>
<Modal>Hello, world!</Modal>

Control open state

Control state through the isOpen boolean prop, and update the state with the onRequestClose callback.

Close it by clicking the overlay, the close button, or press ESC, all of which will trigger the onRequestClose event.

import { useState } from "react";
import Modal from "@intility/bifrost-react/Modal";
import Button from "@intility/bifrost-react/Button";

export default function MyModal() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open modal</Button>
      <Modal isOpen={open} onRequestClose={() => setOpen(false)}>
        Modal content
      </Modal>
    </>
  );
}

Layout example with buttons

<Modal header="Header text">
  <Grid>
    <div>
      This is a modal. Very useful for a ton of different purposes, try it
      yourself today!
    </div>
    <Inline>
      <Inline.Separator />
      <Button>What</Button>
      <Button variant="filled">Okay</Button>
    </Inline>
  </Grid>
</Modal>
<Modal header="Header text">
  <Grid>
    <div>
      This is a modal. Very useful for a ton of different purposes, try it
      yourself today!
    </div>
    <Inline>
      <Inline.Separator />
      <Button>What</Button>
      <Button variant="filled">Okay</Button>
    </Inline>
  </Grid>
</Modal>

Fixed width

The modal stretches to acommodate its content by default, so adding a width (number in px or a CSS length string) is often a good idea if you want text to wrap.

If the content exceeds available screen space (typically for mobile devices), a scrollbar will be rendered inside the modal.

<Modal
  width={700} // equivalent to width='700px'
  header="J.R.R. Tolkien"
>
  <p>
    was born on 3 January 1892 in Bloemfontein in the Orange Free State (later
    annexed by the British Empire; now Free State Province in the Republic of
    South Africa), to Arthur Reuel Tolkien (1857-1896), an English bank manager,
    and his wife Mabel, née Suffield (1870-1904). The couple had left England
    when Arthur was promoted to head the Bloemfontein office of the British bank
    for which he worked. Tolkien had one sibling, his younger brother, Hilary
    Arthur Reuel Tolkien, who was born on 17 February 1894.
  </p>
</Modal>
<Modal
  width={700} // equivalent to width='700px'
  header="J.R.R. Tolkien"
>
  <p>
    was born on 3 January 1892 in Bloemfontein in the Orange Free State (later
    annexed by the British Empire; now Free State Province in the Republic of
    South Africa), to Arthur Reuel Tolkien (1857-1896), an English bank manager,
    and his wife Mabel, née Suffield (1870-1904). The couple had left England
    when Arthur was promoted to head the Bloemfontein office of the British bank
    for which he worked. Tolkien had one sibling, his younger brother, Hilary
    Arthur Reuel Tolkien, who was born on 17 February 1894.
  </p>
</Modal>

Prevent closing

We provide three props to control how the modal can be closed:

• noCloseButton prevents rendering an "X" close button
• noCloseOnOverlayClick prevents closing on overlay click
• noCloseOnEsc prevents closing on ESC keypress

Not passing onRequestClose has the same effect as passing noCloseButton, noCloseOnOverlayClick and noCloseOnEsc.

<Modal noCloseButton> No close button </Modal>
<Modal noCloseOnOverlayClick> No close on overlay click </Modal>
<Modal noCloseOnEsc> No close on ESC </Modal>
<Modal noCloseButton> No close button </Modal>
<Modal noCloseOnOverlayClick> No close on overlay click </Modal>
<Modal noCloseOnEsc> No close on ESC </Modal>

Loading spinner

For displaying a temporary app-wide loading spinner it can be useful to not allow any way to close the modal

<Modal noCloseButton noCloseOnOverlayClick noCloseOnEsc>
  <Icon.Spinner size={64} />
</Modal>
<Modal noCloseButton noCloseOnOverlayClick noCloseOnEsc>
  <Icon.Spinner size={64} />
</Modal>

Transparent

The transparent prop removes the default modal background.

Note: Since the overlay will be dark in both light and dark mode, the default bifrost light mode text color (black) will not be readable!

If you place text or icons directly on the overlay you therefore need to use a static color that will be visible on a dark background, like white or #f3f3f6.

<Modal transparent>
  <Icon.Spinner size={64} style={{ color: "white" }} />
</Modal>
<Modal transparent>
  <Icon.Spinner size={64} style={{ color: "white" }} />
</Modal>

Loading example

import { useState } from "react";
import Modal from "@intility/bifrost-react/Modal";
import Button from "@intility/bifrost-react/Button";
import Icon from "@intility/bifrost-react/Icon";

export default function () {
  const [open, setOpen] = useState(false);

  function simulateLoadingForThreeSeconds() {
    setOpen(true);

    setTimeout(() => {
      setOpen(false);
    }, 3000);
  }

  return (
    <>
      <Button onClick={simulateLoadingForThreeSeconds}>
        Open loading modal
      </Button>
      <Modal
        header={
          <>
            <Icon.Spinner /> Uploading
          </>
        }
        isOpen={open}
      >
        Your file is being processed, please wait exactly three seconds...
      </Modal>
    </>
  );
}