Modal - Advanced

The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else. This component is based on the Radix-Ui Dialog Primitive. All of the exposed APIs and components are exposed here, just some are styled to fit the StreamElements design system.

Example

Use the exposed Modal object from the library to access all the components.

import { Modal, Button, Text, Box } from '@streamelements/frontend-ui';

export function MyComponent() {
    return (
        <Modal.Root>
            <Modal.Trigger />
            <Modal.Portal>
              <Modal.Overlay />
              <Modal.Content css={{ padding: '3rem 2rem 1rem', maxWidth: 550 }}>
                  <Modal.Close />
                  <Text.Heading level="5" css={{ margin: 0 }}>Are you sure you want to delete this overlay?</Text.Heading>
                  <Text.Body>This cannot be reversed</Text.Body>
                  <Box css={{
                      display: 'grid',
                      gridTemplateColumns: '1fr max-content',
                      gridGap: '1rem'
                  }}>
                      <Modal.ClosePrimitive asChild>
                        <Button variant="outlined" color="neutral">Cancel</Button>
                      </Modal.ClosePrimitive>
                      <Button onClick={handleDelete}>Delete</Button>
                  </Box>
              </Modal.Content>
            </Modal.Portal>
        </Modal.Root>
    );
} 

API

We are using Radix-UI Dialog. Click on the link for more detailed API reference.

Root

Root of the modal.

Name	Type	Default value	Description
defaultOpen	boolean	–	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
open	boolean	–	The controlled open state of the dialog. Must be used in conjunction with onOpenChange.
onOpenChange	Function	–	Event handler called when the open state of the dialog changes. (next: boolean) => void

Trigger

The trigger of the modal.

Name	Type	Default value	Description
asChild	boolean	–	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

Portal

The Portal component portals the content and overlay outside of the parent element, ensuring the Modal is displayed on top of everything else.

Overlay

The backdrop of the Modal.

Name	Type	Default value	Description
css	CSS	{}	Pass on additional styling utilizing Stitches' tokens
asChild	boolean	–	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

Content

The modal content.

Name	Type	Default value	Description
css	CSS	{}	Pass on additional styling utilizing Stitches' tokens
asChild	boolean	–	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

Close

An Icon button absolutely positioned in the top right corner of the Content component. Accepts all native button props.

Name	Type	Default value	Description
css	CSS	{}	Pass on additional styling utilizing Stitches' tokens

ClosePrimitive

Non-styled close button exposed for the purpose of avoiding controlled modals for the sake of closing. Use the ClosePrimitive with the as prop and pass on a Button or any other valid tag or component. It will close the modal out of the box for you.

Name	Type	Default value	Description
asChild	boolean	–	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.