Last modified: 24/Jun/2024

Full screen Modal

The full-screen Modal is a version of the basic Modal component. It is used for displaying and guiding the user through complex flows.

#Usage

import type { JSX } from 'react'
import { useState } from 'react'
import { FullScreenModal } from '@kinsta/stratus'

export const ModalExample = (): JSX.Element => {
  const [isVisible, setIsVisible] = useState(false)

  return (
    <FullScreenModal isVisible={isVisible} title="Title" okButton="Okay">
      Content
    </FullScreenModal>
  )
}

#Usage with the Columns

The FullScreenModal component has two columns (LeftColumn and RightColumn). The left column is the main content of the modal, the right column is the sidebar. The columns are only available if the hasTwoColumns and the isWide props are set to true.

See the designs in Figma: FullScreenModal

import type { JSX } from 'react'
import { useState } from 'react'
import { FullScreenModal } from '@kinsta/stratus'

export const ModalExample = (): JSX.Element => {
  const [isVisible, setIsVisible] = useState(false)

  return (
    <FullScreenModal
      isVisible={isVisible}
      onOk={() => setIsVisible(false)}
      onCancel={() => setIsVisible(false)}
      title="My Modal"
      isWide
      hasTwoColumns
    >
      <FullScreenModal.LeftColumn>left</FullScreenModal.LeftColumn>
      <FullScreenModal.RightColumn>right</FullScreenModal.RightColumn>
    </FullScreenModal>
  )
}

#Props

#children

Required

string | ReactFragment | ReactPortal | ReactElement<any, string | JSXElementConstructor<any>>

Content of the modal

#isVisible

boolean

Is the modal opened?

#isOkLoading

boolean

Decides the loading state of the primary button

#title

string | ReactElement<any, string | JSXElementConstructor<any>>

Title of the modal

#isClosable

boolean

If true, hides the close button and disables the mask click

#onOk

(event: MouseEvent<HTMLElement, MouseEvent>) => void

Handles the primary button click

#onCancel

(event: MouseEvent<HTMLElement, MouseEvent> | KeyboardEvent) => void

Handles the secondary button click

#onTertiaryClick

(event: MouseEvent<HTMLElement, MouseEvent> | KeyboardEvent) => void

Handles the tertiary button click

#onAfterClose

(event: TransitionEvent<HTMLElement>) => void

Called after the close animation finish

#onAfterOpen

(event: TransitionEvent<HTMLElement>) => void

Called after the open animation finish

string | ReactElement<any, string | JSXElementConstructor<any>>

If given, overwrites the default footer (the primary and the secondary buttons will disappear)

#okText

string | ReactElement<any, string | JSXElementConstructor<any>>

Label of the primary button

#cancelText

string | ReactElement<any, string | JSXElementConstructor<any>>

Label of the secondary button

#isDanger

boolean

The title and the primary button receives a danger theme

#isCancelDisabled

boolean

The secondary button receives a disabled attribute

#isOkDisabled

boolean

The primary button receives a disabled attribute

#okTooltipText

string | false | ReactElement<any, string | JSXElementConstructor<any>>

Tooltip of the primary button

#isLoading

boolean

The modal will be disabled and the primary button will receive a loading state

#tertiaryButtonText

string | ReactElement<any, string | JSXElementConstructor<any>>

Label of the tertiary button

#tertiaryTooltipText

string | ReactElement<any, string | JSXElementConstructor<any>>

Tooltip of the tertiary button

#isTertiaryDisabled

boolean

The tertiary button receives a disabled attribute

#isWide

boolean

#hasTwoColumns

boolean

#Types

FullScreenModalInterface: props of the Modal component extended by Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'>