SGUI / Development
ToggleButton
Pressed-state actions with host-controlled selection and local density.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
No fixed SGUI child components.
Component documentation
SGUI / Development
Pressed-state actions with host-controlled selection and local density.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
Adjust the public props, then interact with the preview. Source follows the current state.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ToggleButton } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ToggleButtonPlaygroundExample() {
const [selected, setSelected] = useState(false);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<ToggleButton selected={selected} onSelectedChange={setSelected} density="comfortable" disabled={false}>{"Bold"}</ToggleButton>
</Stack>
</ThemeScope>
</>
);
}
An independent scope demonstrates the inherited spacing and interaction targets.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ToggleButton } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ToggleButtonCompactExample() {
const [selected, setSelected] = useState(false);
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<ToggleButton selected={selected} onSelectedChange={setSelected} density="compact" disabled={false}>{"Bold"}</ToggleButton>
</Stack>
</ThemeScope>
</>
);
}
An independent scope demonstrates the inherited spacing and interaction targets.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ToggleButton } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ToggleButtonComfortableExample() {
const [selected, setSelected] = useState(false);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<ToggleButton selected={selected} onSelectedChange={setSelected} density="comfortable" disabled={false}>{"Bold"}</ToggleButton>
</Stack>
</ThemeScope>
</>
);
}
Callbacks update local host state. No backend persistence is implied.
Applied 0 times. Connect persistence in your host.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ToggleButton, Button } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ToggleButtonFormExample() {
const [selected, setSelected] = useState(false);
const [submits, setSubmits] = useState(0);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<Stack gap={3}>
<ToggleButton selected={selected} onSelectedChange={setSelected} density="comfortable" disabled={false}>{"Bold"}</ToggleButton>
</Stack>
<Button onPress={() => setSubmits(count => count + 1)}>Apply local preferences</Button>
<Typography role="status">Applied {submits} times. Connect persistence in your host.</Typography>
</Stack>
</ThemeScope>
</>
);
}