SGUI / Development
Dialog
Controlled overlay dismissal and explicitly host-owned actions.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Controlled overlay dismissal and explicitly host-owned actions.
Loading examples…
Loading examples…
Loading examples…
Controlled overlay dismissal and explicitly host-owned actions.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Dialog, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function OwnedDialogPlaygroundExample() {
const [compactOpen, setCompactOpen] = useState(false);
const [comfortableOpen, setComfortableOpen] = useState(false);
const [action, setAction] = useState("No action yet");
const [open, setOpen] = useState(false);
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [selected, setSelected] = useState("overview");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Button onPress={() => setOpen(true)}>Open dialog</Button><Dialog open={open} title={"Publish course"} size={"md"} dismissOnOutside={true} dismissOnEscape={true} onDismiss={reason => {setOpen(false); setAction(reason);}} footer={<Button onPress={() => {setOpen(false);setAction("Confirmed locally");}}>Confirm</Button>}><Typography>No server request is made. Your application owns persistence.</Typography></Dialog></Stack>
</ThemeScope>
</>
);
}
The same props in independent density scopes.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Dialog, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function OwnedDialogPlaygroundDensitiesExample() {
const [compactOpen, setCompactOpen] = useState(false);
const [comfortableOpen, setComfortableOpen] = useState(false);
const [action, setAction] = useState("No action yet");
const [open, setOpen] = useState(false);
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [selected, setSelected] = useState("overview");
return (
<>
<Stack gap={3}>
<ThemeScope density="compact"><Stack gap={3}><Button onPress={() => setCompactOpen(true)}>Open dialog</Button><Dialog open={compactOpen} title={"Publish course"} size={"md"} dismissOnOutside={true} dismissOnEscape={true} onDismiss={reason => {setCompactOpen(false); setAction(reason);}} footer={<Button onPress={() => {setCompactOpen(false);setAction("Confirmed locally");}}>Confirm</Button>}><Typography>No server request is made. Your application owns persistence.</Typography></Dialog></Stack></ThemeScope>
<ThemeScope density="comfortable"><Stack gap={3}><Button onPress={() => setComfortableOpen(true)}>Open dialog</Button><Dialog open={comfortableOpen} title={"Publish course"} size={"md"} dismissOnOutside={true} dismissOnEscape={true} onDismiss={reason => {setComfortableOpen(false); setAction(reason);}} footer={<Button onPress={() => {setComfortableOpen(false);setAction("Confirmed locally");}}>Confirm</Button>}><Typography>No server request is made. Your application owns persistence.</Typography></Dialog></Stack></ThemeScope>
</Stack>
</>
);
}