logo-icon
Button Group
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 } from 'stwui';
</script>

<ButtonGroup>
   <ButtonGroup.Button>
      <ButtonGroup.Button.Icon slot="icon" icon="paid" />
   </ButtonGroup.Button>
   <ButtonGroup.Button>
      <ButtonGroup.Button.Icon slot="icon" icon="add_circle" />
   </ButtonGroup.Button>
   <ButtonGroup.Button>
      <ButtonGroup.Button.Icon slot="icon" icon="workspaces" />
   </ButtonGroup.Button>
</ButtonGroup>
Basic with Leading


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

<ButtonGroup>
   <ButtonGroup.Button>
      <ButtonGroup.Button.Leading slot="leading">
         <ButtonGroup.Button.Leading.Icon slot="icon" icon="paid" />
      </ButtonGroup.Button.Leading>
      Paid
   </ButtonGroup.Button>
   <ButtonGroup.Button>
      <ButtonGroup.Button.Leading slot="leading">
         <ButtonGroup.Button.Leading.Icon slot="icon" icon="add_circle" />
      </ButtonGroup.Button.Leading>
      Add
   </ButtonGroup.Button>
   <ButtonGroup.Button>
      <ButtonGroup.Button.Leading slot="leading">
         <ButtonGroup.Button.Leading.Icon slot="icon" icon="workspaces" />
      </ButtonGroup.Button.Leading>
      Workspaces
   </ButtonGroup.Button>
</ButtonGroup>
Basic with Loading


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

   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" icon="paid" />
   </ButtonGroup.Button>
   <ButtonGroup.Button
      on:click={() => changeActive(1)}
      active={activeItem === 1}
      loading={activeItem === 1 && loading}
   >
      <ButtonGroup.Button.Icon slot="icon" icon="add_circle" />
   </ButtonGroup.Button>
   <ButtonGroup.Button
      on:click={() => changeActive(2)}
      active={activeItem === 2}
      loading={activeItem === 2 && loading}
   >
      <ButtonGroup.Button.Icon slot="icon" icon="workspaces" />
   </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

ButtonGroup.Button Slots

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

ButtonGroup.Button.Leading Slots

icon <Button.Leading.Icon slot="icon" />
default

ButtonGroup.Button.Leading.Icon Props

icon MaterialIcon

ButtonGroup.Button.Icon Props

icon MaterialIcon

ButtonGroup.Button.Trailing Slots

icon <Button.Leading.Icon slot="icon" />
default

ButtonGroup.Button.Trailing.Icon Props

icon MaterialIcon