Component documentation
SGUI / Development
Presentation labels with owned tone, variant and local density.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
No direct parents in the documented component catalog.
Presentation labels with owned tone, variant and local density.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Chip, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function ChipPlaygroundExample() {
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">
<Chip tone={"neutral"} variant={"filled"}>{"Published"}</Chip>
</ThemeScope>
</>
);
}
The same props in independent density scopes.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Chip, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function ChipPlaygroundDensitiesExample() {
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"><Chip tone={"neutral"} variant={"filled"}>{"Published"}</Chip></ThemeScope>
<ThemeScope density="comfortable"><Chip tone={"neutral"} variant={"filled"}>{"Published"}</Chip></ThemeScope>
</Stack>
</>
);
}
'use client';
import { useState } from 'react';
import { Chip, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function ChipPlaygroundCompositionExample() {
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" wrap gap={3}><Chip tone="neutral">Draft</Chip><Chip tone="primary">Published</Chip><Chip variant="outlined">Archived</Chip></Stack>
</>
);
}
'use client';
import { Chip, Stack } from '@structured-growth/sg-ui/experimental';
export default function ChipMatrixExample() {
return (
<>
<Stack direction="row" wrap gap={3}>{(["neutral","primary"] as const).map(tone => (["filled","outlined"] as const).map(variant => <Chip key={`${tone}-${variant}`} tone={tone} variant={variant}>{tone} · {variant}</Chip>))}</Stack>
</>
);
}