Dialog

function Confirm() {
  const [asking, setAsking] = useState(false);
  const deleteProject = () => setAsking(false);
  return (
    <>
      <Action intent="action.delete" onClick={() => setAsking(true)}>Delete project</Action>
      <Dialog intent="dialog.confirm" open={asking} onClose={() => setAsking(false)} label="Delete this project?">
        <Layout intent="layout.section">
          <Text intent="heading.item" as="h2">Delete this project?</Text>
          <Text intent="text.body">The project and all its data will be gone for good.</Text>
          <Layout intent="layout.actions">
            <Action intent="action.cancel" onClick={() => setAsking(false)}>Cancel</Action>
            <Action intent="action.delete" onClick={deleteProject}>Delete</Action>
          </Layout>
        </Layout>
      </Dialog>
    </>
  );
}