SButtonGroup <s-button-group>

import { SButtonGroup } from 'polaris-vue-elements'

Example

ListGrid

SaveCancelDiscard

<script setup>
import { SButton, SButtonGroup, SPressButton } from 'polaris-vue-elements'
</script>

<template>
  <!-- Default slot: a plain segmented group of PressButtons -->
  <SButtonGroup>
    <SPressButton>List</SPressButton>
    <SPressButton pressed>Grid</SPressButton>
  </SButtonGroup>

  <!-- primary-action/secondary-actions slots follow the same variant rules as SModal:
       primary-action accepts a single variant="primary" button, secondary-actions
       accepts variant="secondary" (or "auto") buttons. -->
  <SButtonGroup>
    <template #primary-action>
      <SButton variant="primary">Save</SButton>
    </template>
    <template #secondary-actions>
      <SButton variant="secondary">Cancel</SButton>
      <SButton variant="secondary">Discard</SButton>
    </template>
  </SButtonGroup>
</template>

Props

Prop	Type	Description
accessibilityLabel	string	Label for the button group that describes the content of the group for screen reader users to understand what's included.
gap	"base" | "none"	The gap between elements.

Slots

Slot	Description
default	The content of the ButtonGroup.
primary-action	The primary action button for the group. Accepts a single Button element with a variant of primary. Cannot be used when gap="none".
secondary-actions	Secondary action buttons for the group. Accepts Button or PressButton elements with a variant of secondary or auto.