@s-ui/react-molecule-modal v2.2.0

MoleculeModal

Description

Modal windows focus users' attention to inform them about a specific interaction. They may require users to make a decision or warn them when an error may have very significant consequences.

Installation

$ npm install @s-ui/react-molecule-modal --save

Usage

import MoleculeModal from '@s-ui/react-molecule-modal'

const Foo = () => {
  return (
    <MoleculeModal>
      <MoleculeModal.OpenTrigger>
        <button>open the dialog</button>
      </MoleculeModal.OpenTrigger>
      <MoleculeModal.Content>
        <MoleculeModal.Header>
          <MoleculeModal.Title>Modal title</MoleculeModal.Title>
        </MoleculeModal.Header>
        <MoleculeModal.Body>
          <MoleculeModal.ScrollArea>
            <MoleculeModal.Description>Modal description</MoleculeModal.Description>
          </MoleculeModal.ScrollArea>
        </MoleculeModal.Body>
        <MoleculeModal.Footer>
          <MoleculeModal.CloseTrigger>
            <button>close the dialog</button>
          </MoleculeModal.CloseTrigger>
        </MoleculeModal.Footer>
        <MoleculeModal.CloseTrigger>
          <MoleculeModal.CloseIconButton />
        </MoleculeModal.CloseTrigger>
      </MoleculeModal.Content>
    </MoleculeModal>
  )
}