PubButtonGroup

Default Usage

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

<script lang="ts" setup>
import { PubButton, PubButtonGroup } from 'vuelicity'
</script>

Rounded Button Group

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

<script lang="ts" setup>
import { PubButton, PubButtonGroup } from 'vuelicity'
</script>

Button Group Icon Action

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

<script lang="ts" setup>
import { PubButton, PubButtonGroup, PubIcon } from 'vuelicity'
</script>

Button Group Icons

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

<script lang="ts" setup>
import { PubButton, PubButtonGroup, 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