Component documentation
SGUI / Development
Native list semantics with optional selectable actions and secondary text.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
No fixed SGUI child components.
No fixed SGUI child components.
No direct parents in the documented component catalog.
Native list semantics with optional selectable actions and secondary text.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { List, ListItem, ListItemButton, ListItemText, ListItemIcon, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
import * as Icons from '@structured-growth/sg-ui/icons';
export default function ListPlaygroundExample() {
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">
<List aria-label="Course sections"><ListItem><ListItemButton selected={selected === "overview"} disabled={false} onPress={() => setSelected("overview")}><ListItemIcon><Icons.BookIcon /></ListItemIcon><ListItemText primary={"Course overview"} secondary={"Six lessons ready"} /></ListItemButton></ListItem><ListItem><ListItemButton selected={selected === "lessons"} onPress={() => setSelected("lessons")}><ListItemText primary="Lessons" secondary="Choose your next activity" /></ListItemButton></ListItem></List>
</ThemeScope>
</>
);
}
The same props in independent density scopes.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { List, ListItem, ListItemButton, ListItemText, ListItemIcon, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
import * as Icons from '@structured-growth/sg-ui/icons';
export default function ListPlaygroundDensitiesExample() {
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"><List aria-label="Course sections"><ListItem><ListItemButton selected={selected === "overview"} disabled={false} onPress={() => setSelected("overview")}><ListItemIcon><Icons.BookIcon /></ListItemIcon><ListItemText primary={"Course overview"} secondary={"Six lessons ready"} /></ListItemButton></ListItem><ListItem><ListItemButton selected={selected === "lessons"} onPress={() => setSelected("lessons")}><ListItemText primary="Lessons" secondary="Choose your next activity" /></ListItemButton></ListItem></List></ThemeScope>
<ThemeScope density="comfortable"><List aria-label="Course sections"><ListItem><ListItemButton selected={selected === "overview"} disabled={false} onPress={() => setSelected("overview")}><ListItemIcon><Icons.BookIcon /></ListItemIcon><ListItemText primary={"Course overview"} secondary={"Six lessons ready"} /></ListItemButton></ListItem><ListItem><ListItemButton selected={selected === "lessons"} onPress={() => setSelected("lessons")}><ListItemText primary="Lessons" secondary="Choose your next activity" /></ListItemButton></ListItem></List></ThemeScope>
</Stack>
</>
);
}