ButtonGroup

Button group shows buttons next to each other.

Basic

svelte

<script lang="ts">
	import { ButtonGroup } from 'stwui';
</script>

<ButtonGroup>
   <ButtonGroup.Button on:click={() => console.log('button clicked!')}>
      One
   </ButtonGroup.Button>
   <ButtonGroup.Button on:click={() => console.log('button clicked!')}>
      Two
   </ButtonGroup.Button>
   <ButtonGroup.Button on:click={() => console.log('button clicked!')}>
      Three
   </ButtonGroup.Button>
</ButtonGroup>

Basic with Active

svelte

<script lang="ts">
	import { ButtonGroup } from 'stwui';

   let active = 1;
</script>

<ButtonGroup>
   <ButtonGroup.Button on:click={() => active = 0} active={active === 0}>
      One
   </ButtonGroup.Button>
   <ButtonGroup.Button on:click={() => active = 1} active={active === 1}>
      Two
   </ButtonGroup.Button>
   <ButtonGroup.Button on:click={() => active = 2} active={active === 2}>
      Three
   </ButtonGroup.Button>
</ButtonGroup>

Basic with Disabled

svelte

<script lang="ts">
	import { ButtonGroup } from 'stwui';
</script>

<ButtonGroup>
   <ButtonGroup.Button disabled>
      One
   </ButtonGroup.Button>
   <ButtonGroup.Button>
      Two
   </ButtonGroup.Button>
   <ButtonGroup.Button>
      Three
   </ButtonGroup.Button>
</ButtonGroup>

Basic with Icon

svelte

<script lang="ts">
	import { ButtonGroup, Icon } from 'stwui';

	const home = "svg-path";
	const send = "svg-path";
	const lock = "svg-path";
</script>

<ButtonGroup>
	<ButtonGroup.Button>
		<ButtonGroup.Button.Icon slot="icon" data={home} />
	</ButtonGroup.Button>
	<ButtonGroup.Button>
		<ButtonGroup.Button.Icon slot="icon" data={send} />
	</ButtonGroup.Button>
	<ButtonGroup.Button>
		<ButtonGroup.Button.Icon slot="icon" data={lock} />
	</ButtonGroup.Button>
</ButtonGroup>

Basic with Leading

svelte

<script lang="ts">
	import { ButtonGroup, Icon } from 'stwui';

	const home = "svg-path";
	const send = "svg-path";
	const lock = "svg-path";
</script>

<ButtonGroup>
	<ButtonGroup.Button>
		<ButtonGroup.Button.Leading slot="leading" data={home} />
		Paid
	</ButtonGroup.Button>
	<ButtonGroup.Button>
		<ButtonGroup.Button.Leading slot="leading" data={send} />
		Add
	</ButtonGroup.Button>
	<ButtonGroup.Button>
		<ButtonGroup.Button.Leading slot="leading" data={lock} />
		Workspaces
	</ButtonGroup.Button>
</ButtonGroup>

Basic with Loading

svelte

<script lang="ts">
	import { ButtonGroup, Icon } from 'stwui';

	const home = "svg-path";
	const send = "svg-path";
	const lock = "svg-path";

   let activeItem: number;
	let loading = false;

	function changeActive(index: number) {
		activeItem = index;
		loading = true;

		setTimeout(() => {
			loading = false;
		}, 2000);
	}
</script>

<ButtonGroup>
	<ButtonGroup.Button
		on:click={() => changeActive(0)}
		active={activeItem === 0}
		loading={activeItem === 0 && loading}
	>
		<ButtonGroup.Button.Icon slot="icon" data={home} />
	</ButtonGroup.Button>
	<ButtonGroup.Button
		on:click={() => changeActive(1)}
		active={activeItem === 1}
		loading={activeItem === 1 && loading}
	>
		<ButtonGroup.Button.Icon slot="icon" data={send} />
	</ButtonGroup.Button>
	<ButtonGroup.Button
		on:click={() => changeActive(2)}
		active={activeItem === 2}
		loading={activeItem === 2 && loading}
	>
		<ButtonGroup.Button.Icon slot="icon" data={lock} />
	</ButtonGroup.Button>
</ButtonGroup>

ButtonGroup Slots

default

ButtonGroup.Button Props

disabled	boolean	false
htmlType	'button' \| 'submit' \| 'reset'	button
loading	boolean	false
defaultLoading	boolean	true
type	'default'\| 'primary' \| 'danger' \| 'ghost' \| 'link' \| 'text' \| 'dark' \| undefined
shape	'square' \| 'circle' \| 'rounded' \| 'pill'	rounded
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'fab'	md
ariaLabel	undefined \| string
htmlType	string	button

ButtonGroup.Button Slots

leading	<ButtonGroup.Button.Leading slot="leading" />
icon	<ButtonGroup.Button.Icon slot="icon" />
default
trailing	<ButtonGroup.Button.Trailing slot="trailing" />

ButtonGroup.Button.Leading Props

data	string (IconData)
viewBox	string	0 0 24 24
size	string	24px
width	string	24px
height	string	24px
color	string	currentColor
stroke	string \| undefined
fill	string	currentColor

ButtonGroup.Button.Icon Props

data	string (IconData)
viewBox	string	0 0 24 24
size	string	24px
width	string	24px
height	string	24px
color	string	currentColor
stroke	string \| undefined
fill	string	currentColor

ButtonGroup.Button.Trailing Props

data	string (IconData)
viewBox	string	0 0 24 24
size	string	24px
width	string	24px
height	string	24px
color	string	currentColor
stroke	string \| undefined
fill	string	currentColor