SGUI / Development
Button group
Group related native actions without changing their interaction semantics.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
No fixed SGUI child components.
Component documentation
SGUI / Development
Group related native actions without changing their interaction semantics.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
Group related native actions without changing their interaction semantics.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ButtonGroup, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function ButtonGroupPlaygroundExample() {
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">
<ButtonGroup label={"Course actions"} orientation={"horizontal"} joined={true}><Button variant="outlined" onPress={() => setAction("Saved")}>Save</Button><Button variant="outlined" onPress={() => setAction("Duplicated")}>Duplicate</Button><Button variant="outlined" disabled>Archive</Button></ButtonGroup>
</ThemeScope>
</>
);
}
These props are fixed independently of the playground.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ButtonGroup, Button, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function ButtonGroupMatrixExample() {
const [action, setAction] = useState("No action yet");
return (
<>
<ThemeScope density={"compact"}>
<Stack gap={3} align="start">
<ButtonGroup label={"Horizontal · compact · separate"} orientation={"horizontal"} joined={false}>
<Button variant={"outlined"} tone="neutral" onPress={() => setAction("Draft saved locally")}>{"Save draft"}</Button>
<Button variant={"outlined"} tone="neutral" onPress={() => setAction("Course duplicated locally")}>Duplicate</Button>
<Button variant={"outlined"} tone="neutral" disabled>Archive unavailable</Button>
</ButtonGroup>
</Stack>
</ThemeScope>
</>
);
}
These props are fixed independently of the playground.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ButtonGroup, Button, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function ButtonGroupMatrixExample() {
const [action, setAction] = useState("No action yet");
return (
<>
<ThemeScope density={"compact"}>
<Stack gap={3} align="start">
<ButtonGroup label={"Horizontal · compact · joined"} orientation={"horizontal"} joined={true}>
<Button variant={"outlined"} tone="neutral" onPress={() => setAction("Draft saved locally")}>{"Save draft"}</Button>
<Button variant={"outlined"} tone="neutral" onPress={() => setAction("Course duplicated locally")}>Duplicate</Button>
<Button variant={"outlined"} tone="neutral" disabled>Archive unavailable</Button>
</ButtonGroup>
</Stack>
</ThemeScope>
</>
);
}
These props are fixed independently of the playground.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ButtonGroup, Button, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function ButtonGroupMatrixExample() {
const [action, setAction] = useState("No action yet");
return (
<>
<ThemeScope density={"comfortable"}>
<Stack gap={3} align="start">
<ButtonGroup label={"Horizontal · comfortable · separate"} orientation={"horizontal"} joined={false}>
<Button variant={"outlined"} tone="neutral" onPress={() => setAction("Draft saved locally")}>{"Save draft"}</Button>
<Button variant={"outlined"} tone="neutral" onPress={() => setAction("Course duplicated locally")}>Duplicate</Button>
<Button variant={"outlined"} tone="neutral" disabled>Archive unavailable</Button>
</ButtonGroup>
</Stack>
</ThemeScope>
</>
);
}
These props are fixed independently of the playground.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ButtonGroup, Button, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function ButtonGroupMatrixExample() {
const [action, setAction] = useState("No action yet");
return (
<>
<ThemeScope density={"comfortable"}>
<Stack gap={3} align="start">
<ButtonGroup label={"Horizontal · comfortable · joined"} orientation={"horizontal"} joined={true}>
<Button variant={"outlined"} tone="neutral" onPress={() => setAction("Draft saved locally")}>{"Save draft"}</Button>
<Button variant={"outlined"} tone="neutral" onPress={() => setAction("Course duplicated locally")}>Duplicate</Button>
<Button variant={"outlined"} tone="neutral" disabled>Archive unavailable</Button>
</ButtonGroup>
</Stack>
</ThemeScope>
</>
);
}
These props are fixed independently of the playground.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ButtonGroup, Button, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function ButtonGroupMatrixExample() {
const [action, setAction] = useState("No action yet");
return (
<>
<ThemeScope density={"compact"}>
<Stack gap={3} align="start">
<ButtonGroup label={"Vertical · compact · separate"} orientation={"vertical"} joined={false}>
<Button variant={"outlined"} tone="neutral" onPress={() => setAction("Draft saved locally")}>{"Save draft"}</Button>
<Button variant={"outlined"} tone="neutral" onPress={() => setAction("Course duplicated locally")}>Duplicate</Button>
<Button variant={"outlined"} tone="neutral" disabled>Archive unavailable</Button>
</ButtonGroup>
</Stack>
</ThemeScope>
</>
);
}
These props are fixed independently of the playground.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ButtonGroup, Button, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function ButtonGroupMatrixExample() {
const [action, setAction] = useState("No action yet");
return (
<>
<ThemeScope density={"compact"}>
<Stack gap={3} align="start">
<ButtonGroup label={"Vertical · compact · joined"} orientation={"vertical"} joined={true}>
<Button variant={"outlined"} tone="neutral" onPress={() => setAction("Draft saved locally")}>{"Save draft"}</Button>
<Button variant={"outlined"} tone="neutral" onPress={() => setAction("Course duplicated locally")}>Duplicate</Button>
<Button variant={"outlined"} tone="neutral" disabled>Archive unavailable</Button>
</ButtonGroup>
</Stack>
</ThemeScope>
</>
);
}
These props are fixed independently of the playground.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ButtonGroup, Button, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function ButtonGroupMatrixExample() {
const [action, setAction] = useState("No action yet");
return (
<>
<ThemeScope density={"comfortable"}>
<Stack gap={3} align="start">
<ButtonGroup label={"Vertical · comfortable · separate"} orientation={"vertical"} joined={false}>
<Button variant={"outlined"} tone="neutral" onPress={() => setAction("Draft saved locally")}>{"Save draft"}</Button>
<Button variant={"outlined"} tone="neutral" onPress={() => setAction("Course duplicated locally")}>Duplicate</Button>
<Button variant={"outlined"} tone="neutral" disabled>Archive unavailable</Button>
</ButtonGroup>
</Stack>
</ThemeScope>
</>
);
}
These props are fixed independently of the playground.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ButtonGroup, Button, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function ButtonGroupMatrixExample() {
const [action, setAction] = useState("No action yet");
return (
<>
<ThemeScope density={"comfortable"}>
<Stack gap={3} align="start">
<ButtonGroup label={"Vertical · comfortable · joined"} orientation={"vertical"} joined={true}>
<Button variant={"outlined"} tone="neutral" onPress={() => setAction("Draft saved locally")}>{"Save draft"}</Button>
<Button variant={"outlined"} tone="neutral" onPress={() => setAction("Course duplicated locally")}>Duplicate</Button>
<Button variant={"outlined"} tone="neutral" disabled>Archive unavailable</Button>
</ButtonGroup>
</Stack>
</ThemeScope>
</>
);
}
These props are fixed independently of the playground.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ButtonGroup, Button, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function ButtonGroupMatrixExample() {
const [action, setAction] = useState("No action yet");
return (
<>
<ThemeScope density={"comfortable"}>
<Stack gap={3} align="start">
<ButtonGroup label={"Filled action group"} orientation={"horizontal"} joined={false}>
<Button variant={"filled"} tone="neutral" onPress={() => setAction("Draft saved locally")}>{"Save draft"}</Button>
<Button variant={"filled"} tone="neutral" onPress={() => setAction("Course duplicated locally")}>Duplicate</Button>
<Button variant={"filled"} tone="neutral" disabled>Archive unavailable</Button>
</ButtonGroup>
</Stack>
</ThemeScope>
</>
);
}
These props are fixed independently of the playground.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ButtonGroup, Button, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function ButtonGroupMatrixExample() {
const [action, setAction] = useState("No action yet");
return (
<>
<ThemeScope density={"comfortable"}>
<Stack gap={3} align="start">
<ButtonGroup label={"Text action group"} orientation={"horizontal"} joined={false}>
<Button variant={"text"} tone="neutral" onPress={() => setAction("Draft saved locally")}>{"Save draft"}</Button>
<Button variant={"text"} tone="neutral" onPress={() => setAction("Course duplicated locally")}>Duplicate</Button>
<Button variant={"text"} tone="neutral" disabled>Archive unavailable</Button>
</ButtonGroup>
</Stack>
</ThemeScope>
</>
);
}
These props are fixed independently of the playground.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ButtonGroup, Button, Stack, Typography } from '@structured-growth/sg-ui/experimental';
export default function ButtonGroupMatrixExample() {
const [action, setAction] = useState("No action yet");
return (
<>
<ThemeScope density={"comfortable"}>
<Stack gap={3} align="start">
<ButtonGroup label={"Long content, disabled and pending actions"} orientation={"vertical"} joined={false}>
<Button variant={"outlined"} tone="neutral" onPress={() => setAction("Draft saved locally")}>{"Save this course as a reusable draft"}</Button>
<Button variant={"outlined"} tone="neutral" onPress={() => setAction("Course duplicated locally")}>Duplicate</Button>
<Button variant={"outlined"} tone="neutral" disabled>Archive unavailable</Button>
<Button variant="outlined" tone="neutral" loading>Publishing course</Button>
</ButtonGroup>
</Stack>
</ThemeScope>
</>
);
}