Skip to content
On this page

Button Group

Collection of buttons consisting of at least 2 buttons in single line

Button Group is a collection of buttons consisting of at least 2 buttons in single line. Therefore, the Button Group is very dependent on the Button component. But it should be underlined that not all props on the Button can work here.

Usage

Simple Button

preview
vue
<template>
  <p-button-group>
    <p-button>Button Text</p-button>
    <p-button>Button Text</p-button>
  </p-button-group>
</template>

Button with Addon

Place one add-on on either side of a Button. You may also make Button all addon.

Addon Left

preview
vue
<template>
  <p-button-group>
    <p-button icon color="info"><IconChevronLeft /></p-button>
    <p-button color="info">Button Text</p-button>
  </p-button-group>
</template>

<script setup>
  import IconChevronLeft from '@privyid/persona-icon/vue/chevron-left/20.vue'
</script>

Addon Right

In the button group, to simplify several actions in one button, it can be combined with the Dropdown component.

preview
vue
<template>
  <p-button-group>
    <p-button color="info">Button Text</p-button>
    <p-dropdown
      color="info"
      no-caret
      icon>
      <template #button-content>
        <IconChevronDown />
      </template>
      <p-dropdown-item>Action</p-dropdown-item>
      <p-dropdown-item>Another action</p-dropdown-item>
      <p-dropdown-item>Something else here</p-dropdown-item>
    </p-dropdown>
  </p-button-group>
</template>

<script setup>
  import IconChevronDown from '@privyid/persona-icon/vue/chevron-down/20.vue'
</script>

All Addon

Button Group all addon is group a series of buttons with only icon

preview
vue
<template>
  <p-button-group>
    <p-button icon><IconChevronLeft /></p-button>
    <p-button icon><IconChevronRight /></p-button>
  </p-button-group>
</template>

<script setup>
  import IconChevronLeft from '@privyid/persona-icon/vue/chevron-left/20.vue'
  import IconChevronRight from '@privyid/persona-icon/vue/chevron-right/20.vue'
</script>

Variants

Button Group just available in 2 variants: solid and outline. You can make these variants by applying variant to each button in a group.

preview
vue
<template>
  <p-button-group>
    <p-button color="info">Button Text</p-button>
    <p-button color="info">Button Text</p-button>
    <p-button color="info">Button Text</p-button>
  </p-button-group>
  <p-button-group>
    <p-button color="info" variant="outline">Button Text</p-button>
    <p-button color="info" variant="outline">Button Text</p-button>
    <p-button color="info" variant="outline">Button Text</p-button>
  </p-button-group>
</template>

Color

You can change color of Button Group by applying color to every Button in a group.

preview
vue
<template>
  <p-button-group>
    <p-button color="primary">Button Text</p-button>
    <p-button color="primary">Button Text</p-button>
    <p-button color="primary">Button Text</p-button>
  </p-button-group>
  <p-button-group>
    <p-button color="info">Button Text</p-button>
    <p-button color="info">Button Text</p-button>
    <p-button color="info">Button Text</p-button>
  </p-button-group>
  <p-button-group>
    <p-button color="success">Button Text</p-button>
    <p-button color="success">Button Text</p-button>
    <p-button color="success">Button Text</p-button>
  </p-button-group>
  <p-button-group>
    <p-button color="warning">Button Text</p-button>
    <p-button color="warning">Button Text</p-button>
    <p-button color="warning">Button Text</p-button>
  </p-button-group>
  <p-button-group>
    <p-button color="danger">Button Text</p-button>
    <p-button color="danger">Button Text</p-button>
    <p-button color="danger">Button Text</p-button>
  </p-button-group>
</template>

Sizing

Instead of applying button sizing prop to every button in a group, you just can add size in Button Group. There are 4 sizes available: xs, sm, md and lg. Default is md

preview
vue
<template>
  <p-button-group size="xs">
    <p-button color="info">Button Text</p-button>
    <p-button color="info">Button Text</p-button>
    <p-button color="info">Button Text</p-button>
  </p-button-group>
  <p-button-group size="sm">
    <p-button color="info">Button Text</p-button>
    <p-button color="info">Button Text</p-button>
    <p-button color="info">Button Text</p-button>
  </p-button-group>
  <p-button-group size="md">
    <p-button color="info">Button Text</p-button>
    <p-button color="info">Button Text</p-button>
    <p-button color="info">Button Text</p-button>
  </p-button-group>
  <p-button-group size="lg">
    <p-button color="info">Button Text</p-button>
    <p-button color="info">Button Text</p-button>
    <p-button color="info">Button Text</p-button>
  </p-button-group>
</template>

Pill mode

You just add pill in Button Group to make button more rounded. Prop pill of every single Button will not working in Button Group

preview
vue
<template>
  <div>
    <p-button-group pill>
      <p-button color="info">Button Text</p-button>
      <p-button color="info">Button Text</p-button>
      <p-button color="info">Button Text</p-button>
    </p-button-group>
  </div>
  <div>
    <p-button-group pill>
      <p-button color="info" variant="outline">Button Text</p-button>
      <p-button color="info" variant="outline">Button Text</p-button>
      <p-button color="info" variant="outline">Button Text</p-button>
    </p-button-group>
  </div>
  <div>
</template>

API

Props

PropsTypeDefaultDescription
sizeStringmdSize of button group, valid value is xs, sm, md and lg
pillBooleanfalseEnable pill mode

Slots

NameDescription
defaultContent (in the form of— button) to place in button group

Events

NameArgumentsDescription
There no event here

See Also

Released under the MIT License.