budibase/packages/bbui/src/ButtonGroup/ButtonGroup.svelte

<script>
  import "@spectrum-css/buttongroup/dist/index-vars.css"
  export let vertical = false
  export let gap = ""

  $: gapStyle =
    gap === "L"
      ? "var(--spacing-l)"
      : gap === "M"
      ? "var(--spacing-m)"
      : gap === "S"
      ? "var(--spacing-s)"
      : null

  function group(element) {
    const buttons = Array.from(element.getElementsByTagName("button"))
    buttons.forEach(button => {
      button.classList.add("spectrum-ButtonGroup-item")
    })
  }
</script>

<div
  use:group
  class="spectrum-ButtonGroup"
  class:spectrum-ButtonGroup--vertical={vertical}
  style={gapStyle ? `gap: ${gapStyle};` : null}
>
  <slot />
</div>