Geist UI

Modal

Display popup content that requires attention or provides additional information. If you just need to prompt for a text message, try component Toast.

The Modal contain an additional Hooks, see subsection useModal for details.

Basic

Use visible control whether Modal is displayed.

Code Editor

() => {
  const [state, setState] = useState(false)
  const handler = () => setState(true)
  const closeHandler = (event) => {
    setState(false)
    console.log('closed')
  }
  return (
    <div>
      <Button auto onClick={handler}>Show Modal</Button>
      <Modal visible={state} onClose={closeHandler}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Subtitle>This is a modal</Modal.Subtitle>
        <Modal.Content>
          <p>Some content contained within the modal.</p>
        </Modal.Content>
        <Modal.Action passive onClick={() => setState(false)}>Cancel</Modal.Action>
        <Modal.Action>Submit</Modal.Action>
      </Modal>
    </div>
  )
}

() => {
  const [state, setState] = useState(false)
  const handler = () => setState(true)
  const closeHandler = (event) => {
    setState(false)
    console.log('closed')
  }
  return (
    <div>
      <Button auto onClick={handler}>Show Modal</Button>
      <Modal visible={state} onClose={closeHandler}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Subtitle>This is a modal</Modal.Subtitle>
        <Modal.Content>
          <p>Some content contained within the modal.</p>
        </Modal.Content>
        <Modal.Action passive onClick={() => setState(false)}>Cancel</Modal.Action>
        <Modal.Action>Submit</Modal.Action>
      </Modal>
    </div>
  )
}

With `useModal`

Use hooks for easier control Modal.

Code Editor

() => {
  const { visible, setVisible, bindings } = useModal()
  return (
    <>
      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>
      <Modal {...bindings}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Subtitle>This is a modal</Modal.Subtitle>
        <Modal.Content>
          <p>Some content contained within the modal.</p>
        </Modal.Content>
        <Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>
        <Modal.Action>Submit</Modal.Action>
      </Modal>
    </>
  )
}

() => {
  const { visible, setVisible, bindings } = useModal()
  return (
    <>
      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>
      <Modal {...bindings}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Subtitle>This is a modal</Modal.Subtitle>
        <Modal.Content>
          <p>Some content contained within the modal.</p>
        </Modal.Content>
        <Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>
        <Modal.Action>Submit</Modal.Action>
      </Modal>
    </>
  )
}

Without Actions

Hide all action buttons.

Code Editor

() => {
  const [state, setState] = useState(false)
  const handler = () => setState(true)
  const closeHandler = (event) => {
    setState(false)
    console.log('closed')
  }
  return (
    <div>
      <Button auto onClick={handler}>Show Modal</Button>
      <Modal visible={state} onClose={closeHandler}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Subtitle>This is a modal</Modal.Subtitle>
        <Modal.Content>
          <p>Some content contained within the modal.</p>
        </Modal.Content>
      </Modal>
    </div>
  )
}

() => {
  const [state, setState] = useState(false)
  const handler = () => setState(true)
  const closeHandler = (event) => {
    setState(false)
    console.log('closed')
  }
  return (
    <div>
      <Button auto onClick={handler}>Show Modal</Button>
      <Modal visible={state} onClose={closeHandler}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Subtitle>This is a modal</Modal.Subtitle>
        <Modal.Content>
          <p>Some content contained within the modal.</p>
        </Modal.Content>
      </Modal>
    </div>
  )
}

Disable Action

Disable one of the buttons.

Code Editor

() => {
  const [state, setState] = useState(false)
  const handler = () => setState(true)
  const closeHandler = (event) => {
    setState(false)
    console.log('closed')
  }
  return (
    <>
      <Button auto onClick={handler}>Show Modal</Button>
      <Modal visible={state} onClose={closeHandler}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Subtitle>This is a modal</Modal.Subtitle>
        <Modal.Content>
          <p>Some content contained within the modal.</p>
        </Modal.Content>
        <Modal.Action passive onClick={() => setState(false)}>Cancel</Modal.Action>
        <Modal.Action disabled>Submit</Modal.Action>
      </Modal>
    </>
  )
}

() => {
  const [state, setState] = useState(false)
  const handler = () => setState(true)
  const closeHandler = (event) => {
    setState(false)
    console.log('closed')
  }
  return (
    <>
      <Button auto onClick={handler}>Show Modal</Button>
      <Modal visible={state} onClose={closeHandler}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Subtitle>This is a modal</Modal.Subtitle>
        <Modal.Content>
          <p>Some content contained within the modal.</p>
        </Modal.Content>
        <Modal.Action passive onClick={() => setState(false)}>Cancel</Modal.Action>
        <Modal.Action disabled>Submit</Modal.Action>
      </Modal>
    </>
  )
}

Customizable

Custom width or className.

Code Editor

() => {
  const { setVisible, bindings } = useModal()
  return (
    <div>
      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>
      <Modal width="35rem" {...bindings}>
        <Modal.Title>My Favorites</Modal.Title>
        <Modal.Content>
          <p>This is the width I want.</p>
        </Modal.Content>
      </Modal>
    </div>
  )
}

() => {
  const { setVisible, bindings } = useModal()
  return (
    <div>
      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>
      <Modal width="35rem" {...bindings}>
        <Modal.Title>My Favorites</Modal.Title>
        <Modal.Content>
          <p>This is the width I want.</p>
        </Modal.Content>
      </Modal>
    </div>
  )
}

Loading

Code Editor

() => {
  const { visible, setVisible, bindings } = useModal()
  return (
    <>
      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>
      <Modal {...bindings}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Subtitle>This is a modal</Modal.Subtitle>
        <Modal.Content>
          <p>Some content contained within the modal.</p>
        </Modal.Content>
        <Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>
        <Modal.Action loading>Submit</Modal.Action>
      </Modal>
    </>
  )
}

() => {
  const { visible, setVisible, bindings } = useModal()
  return (
    <>
      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>
      <Modal {...bindings}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Subtitle>This is a modal</Modal.Subtitle>
        <Modal.Content>
          <p>Some content contained within the modal.</p>
        </Modal.Content>
        <Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>
        <Modal.Action loading>Submit</Modal.Action>
      </Modal>
    </>
  )
}

Overlong

Whether it is desktop or mobile, the content beyond the scope has been well handled.

Code Editor

() => {
  const { visible, setVisible, bindings } = useModal()
  return (
    <>
      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>
      <Modal {...bindings}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Subtitle>Modal with a lot of content</Modal.Subtitle>
        <Modal.Content>
          <p>An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications. </p>
          <p>An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications. </p>
          <p>An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications. </p>
          <p>An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications. </p>
          <p>An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications. </p>
          <p>An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications. </p>
          <p>An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications. </p>
        </Modal.Content>
        <Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>
        <Modal.Action>Submit</Modal.Action>
      </Modal>
    </>
  )
}

() => {
  const { visible, setVisible, bindings } = useModal()
  return (
    <>
      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>
      <Modal {...bindings}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Subtitle>Modal with a lot of content</Modal.Subtitle>
        <Modal.Content>
          <p>An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications. </p>
          <p>An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications. </p>
          <p>An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications. </p>
          <p>An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications. </p>
          <p>An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications. </p>
          <p>An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications. </p>
          <p>An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications.
          An open-source design system for building modern websites and applications. </p>
        </Modal.Content>
        <Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>
        <Modal.Action>Submit</Modal.Action>
      </Modal>
    </>
  )
}

APIs

`Modal.Props`

Attribute	Description	Type	Accepted values	Default
visible	open or close	`boolean`	-	`false`
onClose	open event	`() => void`	-	-
onContentClick	event from modal content	`(e: MouseEvent) => void`	-	-
wrapClassName	className of the modal dialog	`string`	-	-
keyboard	press Esc to close modal	`boolean`	-	`true`
disableBackdropClick	click background and don't close	`boolean`	-	`false`
...	native props	`HTMLAttributes`	`'autoFocus', 'name', 'className', ...`	-

`Modal.Title.Props`

Attribute	Description	Type	Accepted values	Default
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

`Modal.Subtitle.Props`

Attribute	Description	Type	Accepted values	Default
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

`Modal.Content.Props`

Attribute	Description	Type	Accepted values	Default
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

`Modal.Action.Props`

Attribute	Description	Type	Accepted values	Default
passive	display passive mode	`boolean`	-	`false`
disabled	disable current action	`boolean`	-	`false`
onClick	click handler	(e: ModalActionEvent) => void	-	-
loading	show loading	`boolean`	-	`false`
...	native props	`ButtonHTMLAttributes`	`'id', 'className', ...`	-

`useModal`

type useModal = (initialVisible: boolean) => {
  visible: boolean
  setVisible: Dispatch<SetStateAction<boolean>>
  currentRef: MutableRefObject<boolean>
  bindings: {
    visible: boolean
    onClose: () => void
  }
}

`ModalActionEvent`

type ModalActionEvent = MouseEvent<HTMLButtonElement> & {
  close: () => void
}

Contributors

Geist is an open source project from the community.