Migrating from ghl-ui ButtonGroup to HighRise ButtonGroup

HighRise provides HLButtonGroup, a drop-in replacement around HLButton components

Component Changes

Import Changes

- import { UIButtonGroup } from '@gohighlevel/ghl-ui'
- import { UIButton } from '@gohighlevel/ghl-ui'
+ import { HLButtonGroup, HLButton } from '@platform-ui/highrise'

Usage

<template>
  <HLButtonGroup class="hr-button-group">
    <HLButton id="left" color="blue" class="rounded-r-none border-r-0">Left</HLButton>
    <HLButton id="middle" color="blue" class="rounded-none border-r-0">Middle</HLButton>
    <HLButton id="right" color="blue" class="rounded-l-none">Right</HLButton>
  </HLButtonGroup>
</template>

With Icons

<template>
  <HLButtonGroup>
    <HLButton id="prev" variant="secondary">
      <template #iconLeft><ChevronLeftIcon /></template>
      Previous
    </HLButton>
    <HLButton id="next" variant="secondary">
      Next
      <template #iconRight><ChevronRightIcon /></template>
    </HLButton>
  </HLButtonGroup>
</template>

Mixed Variants

<template>
  <HLButtonGroup>
    <HLButton id="cancel" variant="secondary" class="rounded-r-none border-r-0">Cancel</HLButton>
    <HLButton id="save" variant="primary" class="rounded-l-none">Save</HLButton>
  </HLButtonGroup>
</template>

Props Changes

• ghl-ui UIButtonGroup forwarded attributes to NButtonGroup; HighRise HLButtonGroup does the same.
• No new props were added; continue passing layout classes/attrs as needed.

Breaking Changes

1. Namespace change — import HLButtonGroup/HLButton from @platform-ui/highrise.
2. Styling tokens — use HighRise button variants/sizes; adjust classes for borders/radius if you need segmented styling.

Best Practices

1. Keep button ids unique for testing/accessibility.
2. Align variants within a group unless intentionally highlighting a primary action.
3. Use utility classes to manage radius/borders between grouped buttons.
4. Prefer consistent sizes inside a group to avoid height mismatches.

MCPs: use HLButtonGroup directly—no need for custom wrappers; apply simple classes for segment styling and keep button variants consistent.