PubButtonGroup

Default Usage

<template>
  <pub-button-group>
    <pub-button>Button Default</pub-button>
    <pub-button theme="blue">Button Blue</pub-button>
    <pub-button theme="green">Button Green</pub-button>
    <pub-button theme="red">Button Red</pub-button>
  </pub-button-group>
</template>

<script setup>
import { PubButtonGroup, PubButton } from 'vuelicity'
</script>

Rounded Button Group

<template>
  <pub-button-group rounded>
    <pub-button>Button Default</pub-button>
    <pub-button theme="blue">Button Blue</pub-button>
    <pub-button theme="green">Button Green</pub-button>
    <pub-button theme="red">Button Red</pub-button>
  </pub-button-group>
</template>

<script setup>
import { PubButtonGroup, PubButton } from 'vuelicity'
</script>

Button Group Icon Action

<template>
    <pub-button-group>
        <pub-button theme="blue" outline> Save Book </pub-button>
        <pub-button theme="blue" outline>
            <pub-icon name="bookmark" type="outline" />
        </pub-button>
    </pub-button-group>
</template>

<script setup>
import { PubButtonGroup, PubButton, PubIcon } from "vuelicity";
</script>

Button Group Icons

<template>
    <pub-button-group>
        <pub-button theme="blue" outline>
            <template #prepend>
                <pub-icon name="download" />
            </template>
            Download
        </pub-button>
        <pub-button theme="blue" outline> 456k </pub-button>
    </pub-button-group>
</template>

<script setup>
import { PubButtonGroup, PubButton, PubIcon } from "vuelicity";
</script>

Reference

Properties

Name	Type	Default	Description	Options
rounded	Boolean	false	Whether to apply rounded corners to the button group.

Slots

Name	Description
default	Default slot for buttons