Button Group

Button Group is a segmented control component that displays a collection of related buttons with optional icons.

Props

Prop	Type	Default	Description
startText	string	''	The text for the start button
centerText	string	''	The text for the center button
endText	string	''	The text for the end button

Slots

Slot	Description
start-icon	Icon slot for the start button
center-icon	Icon slot for the center button
end-icon	Icon slot for the end button

Basic Usage

Default Button Group (Text Only)

Start

Center

End

<ButtonGroup start-text="Start" center-text="Center" end-text="End"/>

Button Group with Icons and Text

Start

Center

End

<ButtonGroup start-text="Start" center-text="Center" end-text="End">
  <template #start-icon>
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
      <!-- SVG content -->
    </svg>
  </template>
  <!-- Additional icon templates -->
</ButtonGroup>

Icon-Only Button Group

<ButtonGroup>
  <template #start-icon>
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path d="M15.8333 10H4.16667M4.16667 10L10 15.8333M4.16667 10L10 4.16667" stroke="#9F9FA9" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </template>

  <template #center-icon>
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path d="M10 4.16667V15.8333M4.16666 10H15.8333" stroke="#9F9FA9" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </template>

  <template #end-icon>
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path d="M4.16666 10H15.8333M15.8333 10L10 4.16667M15.8333 10L10 15.8333" stroke="#9F9FA9" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </template>
</ButtonGroup>