Modals

<Modal>
  <Button variant="secondary">Open Modal</Button>
  <Modal.Container>
    <Modal.Dialog>
      <Modal.CloseTrigger />
      <Modal.Header>
        <Modal.Heading>Add to Portfolio</Modal.Heading>
      </Modal.Header>
      <Modal.Body>
        {/* Form content */}
      </Modal.Body>
      <Modal.Footer>
        <Button variant="secondary">Cancel</Button>
        <Button>Add Stock</Button>
      </Modal.Footer>
    </Modal.Dialog>
  </Modal.Container>
</Modal>

<AlertDialog>
  <Button variant="danger">Delete Portfolio</Button>
  <AlertDialog.Container>
    <AlertDialog.Dialog>
      <AlertDialog.Header>
        <AlertDialog.Icon />
        <AlertDialog.Heading>Delete Portfolio?</AlertDialog.Heading>
      </AlertDialog.Header>
      <AlertDialog.Body>
        This action cannot be undone.
      </AlertDialog.Body>
      <AlertDialog.Footer>
        <Button variant="secondary">Cancel</Button>
        <Button variant="danger">Delete</Button>
      </AlertDialog.Footer>
    </AlertDialog.Dialog>
  </AlertDialog.Container>
</AlertDialog>