Go Main page
Go Main page

Web components

cover

components

Modal

v.1.0.0 | Saturn

Floating layer over the current page use for capturing the user's attention in order to inform of force to make an action.

import { Modal } from '@kubit-ui-web/react-components'
12345678910
<Modal
  variant="DEFAULT"
  title={{ content: 'Title', variant: 'HEADING_H4_EXPANDED' }}
  content="Content"
  open={true}
  footer={{
    variant: 'DEFAULT',
  }}
  popover={{
    positionVariant: 'relative',

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefine style for its quick use, access them through the variant prop:

12345678910
<Modal
  variant="DEFAULT"
  title={{ content: 'Title', variant: 'HEADING_H4_EXPANDED' }}
  content="Content"
  open={true}
  footer={{
    variant: 'DEFAULT',
  }}
  popover={{
    positionVariant: 'relative',

Image Header

An image or illustration can be add for further information or as decoration through imageHeader property.

12345678910
<Modal
  variant="DEFAULT"
  title={{ content: 'Title', variant: 'HEADING_H4_EXPANDED' }}
  content="Content"
  open={true}
  footer={{
    variant: 'DEFAULT',
  }}
  popover={{
    positionVariant: 'relative',

Close Icon

Specify the icon or graphical element that will be displayed alongside the title for clossing the modal. Normally is a cross icon.

12345678910
<Modal
  variant="DEFAULT"
  title={{ content: 'Title', variant: 'HEADING_H4_EXPANDED' }}
  content="Content"
  open={true}
  footer={{
    variant: 'DEFAULT',
  }}
  popover={{
    positionVariant: 'relative',

Size

Kubit offer different props for limiting the size of the modal and its content:

  • maxHeight
  • maxWidth
  • minContentHeight
  • minHeight
  • minWidth
12345678910
<Modal
  maxHeight="900px"
  maxWidth="1000px"
  minHeight="450px"
  minWidth="100px"
  variant="DEFAULT"
  title={{ content: 'Title', variant: 'HEADING_H4_EXPANDED' }}
  content="Content"
  open={true}
  footer={{