SButtonGroup

<SButtonGroup> is a component that groups multiple buttons together.

@globalbrain/sefirot/lib/components/SButtonGroup.vue

Usage

Wrap <SButton> with <SButtonGroup> component. Note that currently it does not support button types other than :type="fill". If you pass other type buttons the style might get corrupted.

<script setup lang="ts">
import SButton from '@globalbrain/sefirot/lib/components/SButton.vue'
import SButtonGroup from '@globalbrain/sefirot/lib/components/SButtonGroup.vue'
</script>

<template>
  <SButtonGroup>
    <SButton mode="mute" label="Left" />
    <SButton mode="mute" label="Middle" />
    <SButton mode="mute" label="Right" />
  </SButtonGroup>
</template>

<script setup lang="ts">
import SButton from '@globalbrain/sefirot/lib/components/SButton.vue'
import SButtonGroup from '@globalbrain/sefirot/lib/components/SButtonGroup.vue'
</script>

<template>
  <SButtonGroup>
    <SButton mode="mute" label="Left" />
    <SButton mode="mute" label="Middle" />
    <SButton mode="mute" label="Right" />
  </SButtonGroup>
</template>

Slots

Here are the list of slots you may define within the component.

#default

You may pass in any number of <SButton> components. The component will group them together.

<script setup lang="ts">
import SButton from '@globalbrain/sefirot/lib/components/SButton.vue'
import SButtonGroup from '@globalbrain/sefirot/lib/components/SButtonGroup.vue'
</script>

<template>
  <SButtonGroup>
    <SButton mode="mute" label="Left" />
    <SButton mode="mute" label="Middle" />
    <SButton mode="mute" label="Right" />
  </SButtonGroup>
</template>

<script setup lang="ts">
import SButton from '@globalbrain/sefirot/lib/components/SButton.vue'
import SButtonGroup from '@globalbrain/sefirot/lib/components/SButtonGroup.vue'
</script>

<template>
  <SButtonGroup>
    <SButton mode="mute" label="Left" />
    <SButton mode="mute" label="Middle" />
    <SButton mode="mute" label="Right" />
  </SButtonGroup>
</template>