Modal - Basic

Modal.ContentComposition provides a simple curated way to display standard dialog modals. This component is based on the Radix-Ui Dialog custom container concept.

Note: these modals automatically open in a portal at the end of body, with max z-index, so will cover anything previously opened, including other modals/popovers.

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.ContentComposition {...args} data-uid="blah" css={{ width: 350 }}>
        <Modal.Trigger>
          <Button>Open Modal</Button>
        </Modal.Trigger>
        Are you sure you want to do this?
        <Modal.Actions>
          <Modal.Dismiss>
            <Button variant="outlined">Cancel</Button>
          </Modal.Dismiss>
          <Button>Let's rock!</Button>
        </Modal.Actions>
      </Modal.ContentComposition>
    );
}

Modal is available in browser only mode

API

ContentComposition

Main part of the modal, including the card, close icon button, overlay and portal

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	React.ReactNode	–	The button opening the modal (saves wiring state up manually)
actions	React.ReactNode	–	The modal's action buttons (group multiples with React.Fragment); this applies the correct spacing and small screen behavior

Dismiss

Use this to wrap the cancel action button, to avoid manually wiring it up to close the modal; already has asChild applied