import { Playground, Props } from "@slytrunk/docs";
import { Button } from "../Button";
import Dialog from "./Dialog";

# Modal

Modal component

<Props of={Dialog} />

## Basic Usage

<Playground>
  {() => {
    const [visible, setVisibility] = React.useState(false);
    return (
      <React.Fragment>
        <Button onPress={() => setVisibility(true)} title="Open Dialog" />
        <Dialog visible={visible} onDismiss={() => setVisibility(false)}>
          This is a modal dialog.
        </Dialog>
      </React.Fragment>
    );
  }}
</Playground>