Modals

Modal layouts contain content like forms, lists, or charts.

To show the Header of the Modal add a style property in the header prop.

A title

Some Content in here

Options

Disable outside clicking: By enabling the modals.options.disableOutsideClick option (setting it to true), you can prevent the modal from being closed when the user clicks outside of the modal. By default, this option is set to false, meaning that clicking outside the modal will close it.
Close action: The closeAction prop allows you to change the placement and visibility of the close button (the "X" icon) in the top right corner of the modal. By default, it is set to outside, meaning the close button is placed outside of the modal body. You can change the value of the closeAction prop to hide the close button or adjust its placement.

Properties

export type Modal = {
  overlay?: Overlay;
  base?: ModalBase;
  content?: ModalContent;
  header?: ModalHeader;
  footer?: ModalFooter;
};
 
export type ModalBase = {
  color?: CSSProperties["color"];
  background?: CSSProperties["background"];
  border?: CSSProperties["border"];
  boxShadow?: CSSProperties["boxShadow"];
  borderRadius?: CSSProperties["borderRadius"];
  zIndex?: CSSProperties["zIndex"];
};
 
export type ModalContent = {
  fontWeight?: CSSProperties["fontWeight"];
  fontSize?: CSSProperties["fontSize"];
  padding?: CSSProperties["padding"];
};
 
export type ModalHeader = {
  padding?: CSSProperties["padding"];
  borderBottom?: CSSProperties["borderTop"];
  fontSize?: CSSProperties["fontSize"];
  fontWeight?: CSSProperties["fontWeight"];
};
 
export type ModalFooter = {
  background?: CSSProperties["background"];
  borderTop?: CSSProperties["borderTop"];
  padding?: CSSProperties["padding"];
  borderRadius?: CSSProperties["borderRadius"];
};
 
export type Overlay = {
  background?: CSSProperties["background"];
  opacity?: CSSProperties["opacity"];
};