RTL Support: Full

Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Try in Cursor

Button Group

Button group component for grouping related buttons together

Default

Wrap related HLButtons in HLButtonGroup to render them as a single attached segment.

<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

Each child keeps its own color and variant, so a group can hold primary buttons in any color.

<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

A group of outlined secondary buttons — the default variant when no variant is set.

<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

A group of tinted, low-emphasis tertiary buttons.

<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

A group of transparent ghost buttons that fill in on hover.

<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

For text buttons, add spacing utility classes (here flex gap-3) so they read as separate links rather than one attached bar.

<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

Size is not inherited from the group — it must be set on each child HLButton individually. Use the same size value across all of them to scale the whole group uniformly.

Large

Medium

Small

Extra Small

Double Extra Small

Triple Extra Small

<template>
  <HLSpace vertical>
    <div class="flex items-center gap-4">
      <div class="inline-flex w-[50%] justify-end">Large</div>
      <HLButtonGroup class="inline-flex w-[50%] content-start">
        <HLButton id="lg-left" size="lg" color="blue">Left</HLButton>
        <HLButton id="lg-middle" size="lg" color="blue">Middle</HLButton>
        <HLButton id="lg-right" size="lg" color="blue">Right</HLButton>
      </HLButtonGroup>
    </div>
    <div class="flex items-center gap-4">
      <div class="inline-flex w-[50%] justify-end">Medium</div>
      <HLButtonGroup class="inline-flex w-[50%] content-start">
        <HLButton id="md-left" size="md" color="green">Left</HLButton>
        <HLButton id="md-middle" size="md" color="green">Middle</HLButton>
        <HLButton id="md-right" size="md" color="green">Right</HLButton>
      </HLButtonGroup>
    </div>
    <div class="flex items-center gap-4">
      <div class="inline-flex w-[50%] justify-end">Small</div>
      <HLButtonGroup class="inline-flex w-[50%] content-start">
        <HLButton id="sm-left" size="sm" color="orange">Left</HLButton>
        <HLButton id="sm-middle" size="sm" color="orange">Middle</HLButton>
        <HLButton id="sm-right" size="sm" color="orange">Right</HLButton>
      </HLButtonGroup>
    </div>
    <div class="flex items-center gap-4">
      <div class="inline-flex w-[50%] justify-end">Extra Small</div>
      <HLButtonGroup class="inline-flex w-[50%] content-start">
        <HLButton id="xs-left" size="xs" color="red">Left</HLButton>
        <HLButton id="xs-middle" size="xs" color="red">Middle</HLButton>
        <HLButton id="xs-right" size="xs" color="red">Right</HLButton>
      </HLButtonGroup>
    </div>
    <div class="flex items-center gap-4">
      <div class="inline-flex w-[50%] justify-end">Double Extra Small</div>
      <HLButtonGroup class="inline-flex w-[50%] content-start">
        <HLButton id="2xs-left" size="2xs" color="blue">Left</HLButton>
        <HLButton id="2xs-middle" size="2xs" color="blue">Middle</HLButton>
        <HLButton id="2xs-right" size="2xs" color="blue">Right</HLButton>
      </HLButtonGroup>
    </div>
    <div class="flex items-center gap-4">
      <div class="inline-flex w-[50%] justify-end">Triple Extra Small</div>
      <HLButtonGroup class="inline-flex w-[50%] content-start">
        <HLButton id="3xs-left" size="3xs" color="blue">Left</HLButton>
        <HLButton id="3xs-middle" size="3xs" color="blue">Middle</HLButton>
        <HLButton id="3xs-right" size="3xs" color="blue">Right</HLButton>
      </HLButtonGroup>
    </div>
  </HLSpace>
</template>

<script setup lang="ts">
  import { HLButtonGroup, HLButton, HLSpace } from '@platform-ui/highrise'
</script>

Vertical

Set vertical to stack the buttons in a column instead of a row — useful for sidebars and narrow toolbars.

<template>
  <HLButtonGroup vertical>
    <HLButton id="vertical-1" color="blue" variant="primary">Top</HLButton>
    <HLButton id="vertical-2" color="blue" variant="primary">Middle</HLButton>
    <HLButton id="vertical-3" color="blue" variant="primary">Bottom</HLButton>
  </HLButtonGroup>
</template>

<script setup lang="ts">
  import { HLButtonGroup, HLButton } from '@platform-ui/highrise'
</script>

With Icons

Buttons in a group can use the #iconLeft, #iconRight, or #icon slots, just like a standalone button.

<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

Apply disabled or loading per button; each child manages its own state.

<template>
  <HLSpace vertical>
    <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>
  </HLSpace>
</template>

<script setup lang="ts">
  import { HLButtonGroup, HLButton, HLSpace } from '@platform-ui/highrise'
</script>

Mixed Variants

Children can mix variants — for example a primary action next to lower-emphasis options.

<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>

Accessibility

• Wrap the group with role="group" / role="toolbar" and supply aria-label / aria-labelledby so the collection of actions is announced.
• Update each child button's aria-pressed / aria-current to mirror the selected or active state.
• Share helper or validation copy via aria-describedby on the group so every action inherits the guidance.

Imports

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

Props

HLButtonGroup

Name	Type	Default	Description
vertical	boolean	false	Stack the buttons vertically instead of horizontally

Attributes you place on HLButtonGroup (e.g. class, role, aria-label, vertical) are forwarded to the group's root <div> element.

HLButton Props

See the Button component documentation for all available button props.

Slots

Name	Parameters	Description
default	()	The HLButtons to group together