---
name: Popup
menu: UI Kit
---

import { Playground } from "docz"
import Popup from "./Popup"
import Button from "../Button"
import Flex from "../Flex"
import Container from "react-with-state-props"

# Popup

Declaratively control a popup.

## Basic usage

<Playground>
  <Container
  state={{ open: false, focus: false }}
  render={props => (
    <Flex itemGutter>
      <Popup
        href={"/static/js/src-core-client-ui-components-popup-popup.js"}
        title="Coral Project"
        features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
        open={props.open}
        focus={props.focus}
        onFocus={() => props.setFocus(true)}
        onBlur={() => props.setFocus(false)}
        onClose={() => props.setOpen(false)}
      />
      <Button onClick={() => props.setOpen(true)} variant="filled" color="primary" disabled={props.open}>
        Open Popup
      </Button>
      <Button onClick={() => props.setOpen(false)} variant="outlined" disabled={!props.open}>
        Close Popup
      </Button>
      <Button onClick={() => props.setFocus(true)} variant="outlined" disabled={!props.open}>
        Focus Popup
      </Button>
   </Flex>
  )}/>
</Playground>
