ButtonGroup | tcpsystems/ui

Try it

Svelte

<ButtonGroup label="Actions" variant="secondary" />

Examples

Grouped buttons

Grouped buttons.svelte

<script lang="ts">
	import Button from '@tcpsystems/ui/foundation/Button';
	import ButtonGroup from '@tcpsystems/ui/foundation/ButtonGroup';
</script>

<ButtonGroup label="Deployment actions">
	<Button variant="primary">Deploy</Button>
	<Button>Preview</Button>
</ButtonGroup>

Mixed

Mixed.svelte

<script lang="ts">
	import Button from '@tcpsystems/ui/foundation/Button';
	import ButtonGroup from '@tcpsystems/ui/foundation/ButtonGroup';
	import Stack from '@tcpsystems/ui/foundation/Stack';
</script>

<Stack gap="sm">
	<ButtonGroup label="Actions">
		<Button variant="primary">Deploy</Button>
		<Button variant="secondary">Preview</Button>
	</ButtonGroup>

	<ButtonGroup label="Danger zone">
		<Button variant="danger" size="sm">Archive</Button>
		<Button variant="ghost" size="sm">Delete</Button>
	</ButtonGroup>
</Stack>

Keys

Keys.svelte

<script lang="ts">
	import Button from '@tcpsystems/ui/foundation/Button';
	import ButtonGroup from '@tcpsystems/ui/foundation/ButtonGroup';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
</script>

<Cluster>
	<ButtonGroup label="Quick actions">
		<Button variant="primary" icon="play">Resume</Button>
		<Button variant="secondary" icon="pause">Pause</Button>
		<Button variant="ghost" icon="refresh">Restart</Button>
	</ButtonGroup>
</Cluster>

With icons

With icons.svelte

<script lang="ts">
	import Button from '@tcpsystems/ui/foundation/Button';
	import ButtonGroup from '@tcpsystems/ui/foundation/ButtonGroup';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
</script>

<Cluster>
	<ButtonGroup label="Quick actions">
		<Button variant="primary" icon="plus">Create deployment</Button>
		<Button variant="secondary" icon="copy">Clone deployment</Button>
		<Button variant="ghost" icon="download">Download logs</Button>
	</ButtonGroup>
</Cluster>

Disabled

Disabled.svelte

<script lang="ts">
	import Button from '@tcpsystems/ui/foundation/Button';
	import ButtonGroup from '@tcpsystems/ui/foundation/ButtonGroup';
</script>

<ButtonGroup label="Deployment actions unavailable during maintenance">
	<Button disabled>Deploy</Button>
	<Button disabled>Preview</Button>
</ButtonGroup>

API

Import

import ButtonGroup from '@tcpsystems/ui/foundation/ButtonGroup';

Prop	Type	Default
`label`	`string`	none

Snippet
`children`

Hook	Kind
`.tcp-button-group`	Root class