components
Modal
v.1.0.0 | Saturn
StorybookFloating layer over the current page use for capturing the user's attention in order to inform of force to make an action.
<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:
<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.
<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.
<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
<Modal
maxHeight="900px"
maxWidth="1000px"
minHeight="450px"
minWidth="100px"
variant="DEFAULT"
title={{ content: 'Title', variant: 'HEADING_H4_EXPANDED' }}
content="Content"
open={true}
footer={{