HighRise

Migrating from UIButton to HighRise Button ​

This guide will help you migrate from the ghl-ui Button component to the new HighRise Button component.

Component Implementation Changes ​

Import Changes ​

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

Breaking Changes ​

The following architectural changes have been made:

  1. Button Types and Variants:

    • Old: Used type prop with limited options
    • New: Uses combination of variant and color props
    • More flexible styling system with consistent patterns

  2. Size System:

    • Old: Used 'small', 'medium', 'large'
    • New: Uses 'lg', 'md', 'sm', 'xs', '2xs', '3xs'
    • More granular size control

  3. Icon System:

    • Old: Single icon slot
    • New: Three slots: icon, iconLeft, iconRight
    • Better control over icon placement

Props Changes ​

  1. New Required Props:

    • id: Required for accessibility

  2. Renamed/Changed Props:

    • type → Split into variant and color
    • size → New standardized values

  3. New Props:

    • variant: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'text'
    • color: 'blue' | 'gray' | 'red' | 'orange' | 'green'
    • link: Boolean for text button styling

  4. Removed Props:

    • active
    • circle
    • shape
    • quaternary (use variant="tertiary" instead)
    • ghost (use variant="ghost" instead)
    • linkGray (use variant="text" with color="gray")

Examples ​

Basic Button Types ​

diff
- <UIButton id="primary" type="primary">
+ <HLButton id="primary" variant="primary" color="blue">
    Primary Button
  </HLButton>

- <UIButton id="error" type="error">
+ <HLButton id="error" color="red" variant="primary">
    Error Button
  </HLButton>

- <UIButton id="tertiary" type="tertiary">
+ <HLButton id="tertiary" variant="tertiary">
    Tertiary Button
  </HLButton>

- <UIButton id="tertiary" quarternary>
+ <HLButton id="tertiary" variant="ghost" color="gray">
    Tertiary Button
  </HLButton>

Text and Ghost Buttons ​

diff
- <UIButton id="text" text>
+ <HLButton id="text" variant="text" color="gray" link>
    Text Button
  </HLButton>

- <UIButton id="ghost" ghost>
+ <HLButton id="ghost" variant="ghost" color="gray">
    Ghost Button
  </HLButton>

- <UIButton id="link-gray" linkGray text>
+ <HLButton id="link" variant="text" color="gray" link>
    Link Button
  </HLButton>

Size Variants ​

diff
- <UIButton id="small" size="small">
+ <HLButton id="small" size="sm">
    Small Button
  </HLButton>

- <UIButton id="medium" size="medium">
+ <HLButton id="medium" size="md">
    Medium Button
  </HLButton>

- <UIButton id="large" size="large">
+ <HLButton id="large" size="lg">
    Large Button
  </HLButton>

Icon Buttons ​

diff
- <UIButton id="icon-button" type="primary">
-   <template #icon>
-     <Share01Icon class="w-5 h-5"/>
-   </template>
- </UIButton>

+ <HLButton id="icon-only" color="blue">
+   <template #iconLeft>
+     <Share01Icon class="w-3" />
+   </template>
+ </HLButton>
diff
- <UIButton id="icon-button" type="primary" icon-placement="left">
-   <template #icon>
-     <Share01Icon class="w-5 h-5"/>
-   </template>
- </UIButton>

+ <HLButton id="icon-only" color="blue">
+   <template #iconLeft>
+     <Share01Icon class="w-3" />
+   </template>
+ </HLButton>
diff
- <UIButton id="icon-button" type="primary" icon-placement="left">
-   <template #icon>
-     <Share01Icon class="w-5 h-5"/>
-   </template>
- </UIButton>

+ <HLButton id="icon-only" color="blue">
+   <template #iconRight>
+     <Share01Icon class="w-3" />
+   </template>
+ </HLButton>

Button Groups ​

vue
<template>
  <div class="flex items-center gap-0">
    <HLButton id="group-left" color="blue" class="rounded-r-none border-r-0"> Left </HLButton>
    <HLButton id="group-middle" color="blue" class="rounded-none border-r-0"> Middle </HLButton>
    <HLButton id="group-right" color="blue" class="rounded-l-none"> Right </HLButton>
  </div>
</template>

Type Definitions ​

typescript
type HLButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'text'
type HLButtonColor = 'blue' | 'gray' | 'red' | 'orange' | 'green'
type HLButtonSize = 'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'

interface HLButtonProps {
  id: string
  variant?: HLButtonVariant
  color?: HLButtonColor
  size?: HLButtonSize
  disabled?: boolean
  loading?: boolean
  link?: boolean
}

Default Values ​

typescript
const defaults = {
  variant: 'secondary',
  color: 'gray',
  size: 'md',
}

Best Practices ​

  1. Always provide unique id props for accessibility
  2. Use appropriate color and variant combinations
  3. Maintain consistent sizing across similar buttons
  4. Use icon slots appropriately for alignment
  5. Consider mobile touch targets when choosing sizes
  6. Use link variant for text-only buttons
  7. Group related buttons with proper styling
  8. Implement proper loading states
  9. Follow color semantics (e.g., red for destructive actions)
  10. Follow accessibility guidelines

Additional Notes ​

  1. The component provides built-in responsive design
  2. Enhanced status visualization with loading states
  3. Support for RTL layouts
  4. Improved accessibility features
  5. Consistent styling across all variants
  6. Better touch targets for mobile
  7. Flexible icon placement options
  8. Integration with other HighRise components
  9. Support for custom styling via classes
  10. Built-in support for form submission