Migrating from UIButton to HighRise Button

HLButton replaces UIButton with a variant-based styling system, expanded size tokens, and explicit icon slots. IDs are optional (auto-generated) but recommended for testing.

Component Implementation Changes

Import Changes

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

Breaking/Behavioral Changes

1. Variants vs type flags
   • UIButton used type plus booleans like ghost, text, quaternary.
   • HLButton uses variant (primary | secondary | tertiary | ghost | text) and a color token. Use variant="ghost" for quaternary-like styling.
2. Size system
   • UIButton: small, medium, large.
   • HLButton: 3xs, 2xs, xs, sm, md, lg, xl, 2xl (default sm when unset).
3. Icon slots
   • UIButton: single #icon slot with placement prop.
   • HLButton: dedicated #icon, #iconLeft, and #iconRight slots; icon-only buttons auto-pad via slot detection.
4. Links
   • HLButton can render as anchor via href/target; set link for link-style text treatment.
5. Auto IDs
   • id is optional; one is generated if omitted. Provide explicit IDs for testing/accessibility when needed.

Props Mapping

UIButton	HLButton	Notes
type + primary/error/...	variant + color	color defaults to gray; accepts brand tokens or hex strings.
size (small/medium/large)	size (3xs → 2xl)	Choose the closest token.
ghost/text/quaternary	variant="ghost" / variant="text"	Use variant instead of boolean flags.
circle	class="rounded-full"	Apply rounding via class.
block	fullWidth	Boolean to stretch to container width.
loading	loading	Same behavior.
disabled	disabled	Same behavior.
icon + icon-placement	#icon / #iconLeft / #iconRight	Slots wrap content with HLIcon automatically.
-	href, target, link	Render as anchor when href is provided.
-	iconLabels	Accessibility labels for icon-only buttons.

Examples

Basic Variants

<template>
  <HLButton variant="primary" color="blue">Save</HLButton>
  <HLButton variant="secondary" color="gray">Cancel</HLButton>
  <HLButton variant="ghost" color="gray">Ghost</HLButton>
</template>

Icon Placements

<template>
  <HLButton variant="primary" color="blue">
    <template #iconLeft><PlusIcon /></template>
    Add Item
  </HLButton>

  <HLButton variant="ghost" color="gray" class="rounded-full">
    <template #icon><TrashIcon /></template>
  </HLButton>
</template>

Link Style

<HLButton variant="text" link href="https://example.com" target="_blank">
  Learn more
</HLButton>

Sizes

<template>
  <HLButton size="xs" variant="secondary">XS</HLButton>
  <HLButton size="md" variant="secondary">MD</HLButton>
  <HLButton size="lg" variant="secondary">LG</HLButton>
</template>