SGUI / Development
Avatar
Named or decorative identities with stable fallback content.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
No fixed SGUI child components.
Component documentation
SGUI / Development
Named or decorative identities with stable fallback content.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
Named or decorative identities with stable fallback content.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Avatar, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function AvatarPlaygroundExample() {
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">
<Avatar alt={"Ada Lovelace"} fallback={"AL"} size={"medium"} shape={"circle"} />
</ThemeScope>
</>
);
}
The same props in independent density scopes.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Avatar, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function AvatarPlaygroundDensitiesExample() {
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"><Avatar alt={"Ada Lovelace"} fallback={"AL"} size={"medium"} shape={"circle"} /></ThemeScope>
<ThemeScope density="comfortable"><Avatar alt={"Ada Lovelace"} fallback={"AL"} size={"medium"} shape={"circle"} /></ThemeScope>
</Stack>
</>
);
}
Grace Hopper
Instructor
'use client';
import { useState } from 'react';
import { Avatar, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function AvatarPlaygroundCompositionExample() {
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 direction="row" gap={3} align="center"><Avatar alt="Grace Hopper" fallback="GH" /><Stack gap={1}><Typography>Grace Hopper</Typography><Typography tone="muted" variant="caption">Instructor</Typography></Stack></Stack>
</>
);
}
'use client';
import { Avatar, Stack } from '@structured-growth/sg-ui/experimental';
export default function AvatarMatrixExample() {
return (
<>
<Stack direction="row" wrap gap={3}>{(["small","medium","large"] as const).map(size => (["circle","square"] as const).map(shape => <Avatar key={`${size}-${shape}`} size={size} shape={shape} alt={`${size} ${shape} avatar`} fallback="AL" />))}</Stack>
</>
);
}