SGUI / Development
Progress
Determinate and unknown-work progress with meaningful accessible labels.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Determinate and unknown-work progress with meaningful accessible labels.
Loading examples…
Loading examples…
Loading examples…
Determinate and unknown-work progress with meaningful accessible labels.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Progress, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function ProgressPlaygroundExample() {
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">
<Progress label={"Uploading course materials"} variant={"linear"} value={false ? undefined : Number("25")} />
</ThemeScope>
</>
);
}
The same props in independent density scopes.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Progress, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function ProgressPlaygroundDensitiesExample() {
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"><Progress label={"Uploading course materials"} variant={"linear"} value={false ? undefined : Number("25")} /></ThemeScope>
<ThemeScope density="comfortable"><Progress label={"Uploading course materials"} variant={"linear"} value={false ? undefined : Number("25")} /></ThemeScope>
</Stack>
</>
);
}
'use client';
import { useState } from 'react';
import { Progress, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function ProgressPlaygroundCompositionExample() {
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}><Progress label="3 of 10 files" value={3} maxValue={10} valueText="3 of 10 files" /><Progress label="Preparing download" variant="circular" /></Stack>
</>
);
}
The public primitive fixes the circular variant; the shared playground controls adjust its label and value.
'use client';
import { CircularProgress } from '@structured-growth/sg-ui/primitives';
export default function CircularProgressWrapperExample() {
return (
<>
<CircularProgress label={"Uploading course materials"} value={25} />
</>
);
}
The public primitive fixes the linear variant without changing accessible progress semantics.
'use client';
import { LinearProgress } from '@structured-growth/sg-ui/primitives';
export default function LinearProgressWrapperExample() {
return (
<>
<LinearProgress label={"Uploading course materials"} value={25} />
</>
);
}