Source: https://app-studio-6167b.web.app/docs/Modal

@app-studio/components

# Modal

A custom content overlay that appears on top of the main screen, with support for headers, bodies, footers, and flexible positioning.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal.tsx)

## Import

```ts
import { Modal } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Button } from '@app-studio/components';
import { Text } from 'app-studio';

import { Modal } from '@app-studio/components';
import { hideModal, showModal } from '@app-studio/components';

export const DefaultModal = () => {
  return (
    <>
      <Button onClick={() => showModal('DefaultModal')} isAuto>
        Blur Overlay
      </Button>
      <Modal.Layout
        modals={{
          DefaultModal: () => (
            <Modal.Container>
              <Modal.Header>
                <Text size="lg" weight="semiBold">
                  Title
                </Text>
              </Modal.Header>
              <Modal.Body>
                <Text>
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros. Praesent
                  commodo cursus magna, vel scelerisque nisl consectetur et.
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros. Praesent
                  commodo cursus magna, vel scelerisque nisl consectetur et.
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros. Praesent
                  commodo cursus magna, vel scelerisque nisl consectetur et.
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros. Praesent
                  commodo cursus magna, vel scelerisque nisl consectetur et.
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros. Praesent
                  commodo cursus magna, vel scelerisque nisl consectetur et.
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros. Praesent
                  commodo cursus magna, vel scelerisque nisl consectetur et.
                </Text>
              </Modal.Body>
              <Modal.Footer>
                <Button onClick={hideModal}>Cancel</Button>
              </Modal.Footer>
            </Modal.Container>
          ),
        }}
      />
    </>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Modal**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `buttonColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L9) |
| `iconSize` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L11) |
| `shape` | `Shape` `"square"``"rounded"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L13) |
| `isFullScreen` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L15) |
| `buttonPosition` | `CloseButtonPosition` `"left"``"right"``"none"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L17) |
| `onClose` | `(() => void)` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L19) |
| `blur` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L21) |
| `isOpen` | `boolean` | `—` | Controls whether the component is open.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L23) |
| `isClosePrevented` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L25) |
| `position` | `Position` `"bottom"``"left"``"right"``"top"``"center"` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L27) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `—` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L29) |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L31) |
| `title` | `string` | `—` | Main title displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L33) |

Common inherited styling props (7)

**Modal inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

### Modal.Overlay

**Modal.Overlay**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L53) |
| `blur` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L55) |
| `isOpen` Required | `boolean` | `—` | Controls whether the component is open.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L57) |
| `isClosePrevented` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L59) |
| `position` | `Position` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L61) |
| `isFullScreen` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L63) |
| `onClose` Required | `() => void` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L65) |

### Modal.Container

**Modal.Container**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L105) |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L110) |
| `shape` | `Shape` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L112) |
| `isFullScreen` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L114) |
| `isOpen` | `boolean` | `—` | Controls whether the component is open.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L116) |
| `onClose` | `(() => void)` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L118) |
| `isClosePrevented` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L120) |
| `blur` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L122) |
| `variant` | `string` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L124) |
| `buttonColor` | `any` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L126) |
| `buttonPosition` | `CloseButtonPosition` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L128) |
| `position` | `Position` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L130) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `—` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L132) |

### Modal.Header

**Modal.Header**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `views` | `{ container?: ViewProps; header?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L70) |
| `buttonColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L77) |
| `iconSize` | `Size` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L79) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L81) |
| `buttonPosition` | `CloseButtonPosition` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L83) |
| `buttonSize` | `Size` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L86) |
| `variant` | `string` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L88) |
| `onClose` | `(() => void)` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L90) |

### Modal.Body

**Modal.Body**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `views` | `{ view?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L137) |
| `buttonColor` | `any` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L142) |
| `variant` | `string` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L144) |

### Modal.Footer

**Modal.Footer**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L149) |

### Modal.Layout

**Modal.Layout**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `modals` Required | `{ [x: string]: React.FC<any>; }` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L95) |
| `onShow` | `((name: string, props?: any) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L97) |
| `onHide` | `((name?: string, props?: any) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L99) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.