Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Button Group

Button group component for grouping related buttons together

Default

Vue

<template>
  <HLButtonGroup>
    <HLButton id="group-1">Button 1</HLButton>
    <HLButton id="group-2">Button 2</HLButton>
    <HLButton id="group-3">Button 3</HLButton>
  </HLButtonGroup>
</template>
<script setup lang="ts">
  import { HLButtonGroup, HLButton } from '@platform-ui/highrise'
</script>

Primary Buttons

Vue

<template>
  <HLButtonGroup>
    <HLButton id="primary-blue" color="blue" variant="primary">Blue</HLButton>
    <HLButton id="primary-green" color="green" variant="primary">Green</HLButton>
    <HLButton id="primary-gray" color="gray" variant="primary">Gray</HLButton>
    <HLButton id="primary-orange" color="orange" variant="primary">Orange</HLButton>
    <HLButton id="primary-red" color="red" variant="primary">Red</HLButton>
  </HLButtonGroup>
</template>
<script setup lang="ts">
  import { HLButtonGroup, HLButton } from '@platform-ui/highrise'
</script>

Secondary Buttons

Vue

<template>
  <HLButtonGroup>
    <HLButton id="secondary-blue" color="blue">Blue</HLButton>
    <HLButton id="secondary-green" color="green">Green</HLButton>
    <HLButton id="secondary-gray" color="gray">Gray</HLButton>
    <HLButton id="secondary-orange" color="orange">Orange</HLButton>
    <HLButton id="secondary-red" color="red">Red</HLButton>
  </HLButtonGroup>
</template>
<script setup lang="ts">
  import { HLButtonGroup, HLButton } from '@platform-ui/highrise'
</script>

Tertiary Buttons

Vue

<template>
  <HLButtonGroup>
    <HLButton id="tertiary-blue" color="blue" variant="tertiary">Blue</HLButton>
    <HLButton id="tertiary-green" color="green" variant="tertiary">Green</HLButton>
    <HLButton id="tertiary-gray" color="gray" variant="tertiary">Gray</HLButton>
    <HLButton id="tertiary-orange" color="orange" variant="tertiary">Orange</HLButton>
    <HLButton id="tertiary-red" color="red" variant="tertiary">Red</HLButton>
  </HLButtonGroup>
</template>
<script setup lang="ts">
  import { HLButtonGroup, HLButton } from '@platform-ui/highrise'
</script>

Ghost Buttons

Vue

<template>
  <HLButtonGroup>
    <HLButton id="ghost-blue" color="blue" variant="ghost">Blue</HLButton>
    <HLButton id="ghost-green" color="green" variant="ghost">Green</HLButton>
    <HLButton id="ghost-gray" color="gray" variant="ghost">Gray</HLButton>
    <HLButton id="ghost-orange" color="orange" variant="ghost">Orange</HLButton>
    <HLButton id="ghost-red" color="red" variant="ghost">Red</HLButton>
  </HLButtonGroup>
</template>
<script setup lang="ts">
  import { HLButtonGroup, HLButton } from '@platform-ui/highrise'
</script>

Text Buttons

Vue

<template>
  <HLButtonGroup class="flex gap-3">
    <HLButton id="text-blue" color="blue" variant="text">Blue</HLButton>
    <HLButton id="text-green" color="green" variant="text">Green</HLButton>
    <HLButton id="text-gray" color="gray" variant="text">Gray</HLButton>
    <HLButton id="text-orange" color="orange" variant="text">Orange</HLButton>
    <HLButton id="text-red" color="red" variant="text">Red</HLButton>
  </HLButtonGroup>
</template>
<script setup lang="ts">
  import { HLButtonGroup, HLButton } from '@platform-ui/highrise'
</script>

Different Sizes

Large

Medium

Small

Extra Small

Double Extra Small

Triple Extra Small

Vue

<template>
  <HLButtonGroup>
    <HLButton id="size-example-1" :size="size" color="blue">Left</HLButton>
    <HLButton id="size-example-2" :size="size" color="blue">Middle</HLButton>
    <HLButton id="size-example-3" :size="size" color="blue">Right</HLButton>
  </HLButtonGroup>
</template>
<script setup lang="ts">
  import { HLButtonGroup, HLButton } from '@platform-ui/highrise'
</script>

With Icons

Vue

<template>
  <HLButtonGroup>
    <HLButton id="icon-left" color="blue">
      <template #iconLeft>
        <UserPlus01Icon class="w-3" />
      </template>
      Left Icon
    </HLButton>
    <HLButton id="icon-right" color="blue">
      Right Icon
      <template #iconRight>
        <UserPlus01Icon class="w-3" />
      </template>
    </HLButton>
    <HLButton id="icon-only" color="blue">
      <template #icon>
        <UserPlus01Icon class="w-3" />
      </template>
    </HLButton>
  </HLButtonGroup>
</template>
<script setup lang="ts">
  import { HLButtonGroup, HLButton } from '@platform-ui/highrise'
  import { UserPlus01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Disabled and Loading States

Vue

<template>
  <HLButtonGroup>
    <HLButton id="disabled-1" color="blue" disabled>Disabled</HLButton>
    <HLButton id="disabled-2" color="green" disabled>Disabled</HLButton>
    <HLButton id="disabled-3" color="red" disabled>Disabled</HLButton>
  </HLButtonGroup>

  <HLButtonGroup>
    <HLButton id="loading-1" color="blue" loading>Loading</HLButton>
    <HLButton id="loading-2" color="green" loading>Loading</HLButton>
    <HLButton id="loading-3" color="red" loading>Loading</HLButton>
  </HLButtonGroup>
</template>
<script setup lang="ts">
  import { HLButtonGroup, HLButton } from '@platform-ui/highrise'
</script>

Mixed Variants

Vue

<template>
  <HLButtonGroup>
    <HLButton id="mixed-primary" color="blue" variant="primary">Primary</HLButton>
    <HLButton id="mixed-secondary" color="blue">Secondary</HLButton>
    <HLButton id="mixed-tertiary" color="blue" variant="tertiary">Tertiary</HLButton>
    <HLButton id="mixed-ghost" color="blue" variant="ghost">Ghost</HLButton>
  </HLButtonGroup>
</template>
<script setup lang="ts">
  import { HLButtonGroup, HLButton } from '@platform-ui/highrise'
</script>

Imports

import { HLButtonGroup, HLButton } from '@platform-ui/highrise'

Props

HLButtonGroup

The ButtonGroup component does not have specific props beyond standard HTML div attributes.

HLButton Props

See the Button component documentation for all available button props.