Accessibility: Full

Translations: Not Needed

Button

Atomic button element

Default

html

<template>
  <HLButton id="default-blue">Click me</HLButton>
</template>

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

Primary

DefaultLoadingDisabled

html

<template>
  <HLButton id="primary-blue" color="blue" variant="primary">Click me</HLButton>
  <HLButton id="primary-green" color="green" variant="primary">Click me</HLButton>
  <HLButton id="primary-gray" color="gray" variant="primary">Click me</HLButton>
  <HLButton id="primary-orange" color="orange" variant="primary">Click me</HLButton>
  <HLButton id="primary-red" color="red" variant="primary">Click me</HLButton>
</template>

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

html

<template>
  <HLButton id="primary-blue" color="blue" variant="primary" loading>Click me</HLButton>
  <HLButton id="primary-green" color="green" variant="primary" loading>Click me</HLButton>
  <HLButton id="primary-gray" color="gray" variant="primary" loading>Click me</HLButton>
  <HLButton id="primary-orange" color="orange" variant="primary" loading>Click me</HLButton>
  <HLButton id="primary-red" color="red" variant="primary" loading>Click me</HLButton>
</template>

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

html

<template>
  <HLButton id="primary-blue" color="blue" variant="primary" disabled>Click me</HLButton>
  <HLButton id="primary-green" color="green" variant="primary" disabled>Click me</HLButton>
  <HLButton id="primary-gray" color="gray" variant="primary" disabled>Click me</HLButton>
  <HLButton id="primary-orange" color="orange" variant="primary" disabled>Click me</HLButton>
  <HLButton id="primary-red" color="red" variant="primary" disabled>Click me</HLButton>
</template>

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

Secondary

DefaultLoadingDisabled

html

<template>
  <HLButton id="secondary-blue" color="blue">Click me</HLButton>
  <HLButton id="secondary-green" color="green">Click me</HLButton>
  <HLButton id="secondary-gray" color="gray">Click me</HLButton>
  <HLButton id="secondary-orange" color="orange">Click me</HLButton>
  <HLButton id="secondary-red" color="red">Click me</HLButton>
</template>

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

html

<template>
  <HLButton id="secondary-blue" color="blue" loading>Click me</HLButton>
  <HLButton id="secondary-green" color="green" loading>Click me</HLButton>
  <HLButton id="secondary-gray" color="gray" loading>Click me</HLButton>
  <HLButton id="secondary-orange" color="orange" loading>Click me</HLButton>
  <HLButton id="secondary-red" color="red" loading>Click me</HLButton>
</template>

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

html

<template>
  <HLButton id="secondary-blue" color="blue" disabled>Click me</HLButton>
  <HLButton id="secondary-green" color="green" disabled>Click me</HLButton>
  <HLButton id="secondary-gray" color="gray" disabled>Click me</HLButton>
  <HLButton id="secondary-orange" color="orange" disabled>Click me</HLButton>
  <HLButton id="secondary-red" color="red" disabled>Click me</HLButton>
</template>

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

Tertiary

DefaultLoadingDisabled

html

<template>
  <HLButton id="tertiary-blue" color="blue" variant="tertiary">Click me</HLButton>
  <HLButton id="tertiary-green" color="green" variant="tertiary">Click me</HLButton>
  <HLButton id="tertiary-gray" color="gray" variant="tertiary">Click me</HLButton>
  <HLButton id="tertiary-orange" color="orange" variant="tertiary">Click me</HLButton>
  <HLButton id="tertiary-red" color="red" variant="tertiary">Click me</HLButton>
</template>

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

html

<template>
  <HLButton id="tertiary-blue" color="blue" variant="tertiary" loading>Click me</HLButton>
  <HLButton id="tertiary-green" color="green" variant="tertiary" loading>Click me</HLButton>
  <HLButton id="tertiary-gray" color="gray" variant="tertiary" loading>Click me</HLButton>
  <HLButton id="tertiary-orange" color="orange" variant="tertiary" loading>Click me</HLButton>
  <HLButton id="tertiary-red" color="red" variant="tertiary" loading>Click me</HLButton>
</template>

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

html

<template>
  <HLButton id="tertiary-blue" color="blue" variant="tertiary" disabled>Click me</HLButton>
  <HLButton id="tertiary-green" color="green" variant="tertiary" disabled>Click me</HLButton>
  <HLButton id="tertiary-gray" color="gray" variant="tertiary" disabled>Click me</HLButton>
  <HLButton id="tertiary-orange" color="orange" variant="tertiary" disabled>Click me</HLButton>
  <HLButton id="tertiary-red" color="red" variant="tertiary" disabled>Click me</HLButton>
</template>

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

Ghost

DefaultLoadingDisabled

html

<template>
  <HLButton id="ghost-blue" color="blue" variant="ghost">Click me</HLButton>
  <HLButton id="ghost-green" color="green" variant="ghost">Click me</HLButton>
  <HLButton id="ghost-gray" color="gray" variant="ghost">Click me</HLButton>
  <HLButton id="ghost-orange" color="orange" variant="ghost">Click me</HLButton>
  <HLButton id="ghost-red" color="red" variant="ghost">Click me</HLButton>
</template>

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

html

<template>
  <HLButton id="ghost-blue" color="blue" variant="ghost" loading>Click me</HLButton>
  <HLButton id="ghost-green" color="green" variant="ghost" loading>Click me</HLButton>
  <HLButton id="ghost-gray" color="gray" variant="ghost" loading>Click me</HLButton>
  <HLButton id="ghost-orange" color="orange" variant="ghost" loading>Click me</HLButton>
  <HLButton id="ghost-red" color="red" variant="ghost" loading>Click me</HLButton>
</template>

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

html

<template>
  <HLButton id="ghost-blue" color="blue" variant="ghost" disabled>Click me</HLButton>
  <HLButton id="ghost-green" color="green" variant="ghost" disabled>Click me</HLButton>
  <HLButton id="ghost-gray" color="gray" variant="ghost" disabled>Click me</HLButton>
  <HLButton id="ghost-orange" color="orange" variant="ghost" disabled>Click me</HLButton>
  <HLButton id="ghost-red" color="red" variant="ghost" disabled>Click me</HLButton>
</template>

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

Text

DefaultLoadingDisabled

html

<template>
  <HLButton id="text-blue" color="blue" variant="text" link>Click me</HLButton>
  <HLButton id="text-green" color="green" variant="text">Click me</HLButton>
  <HLButton id="text-gray" color="gray" variant="text">Click me</HLButton>
  <HLButton id="text-orange" color="orange" variant="text">Click me</HLButton>
  <HLButton id="text-red" color="red" variant="text">Click me</HLButton>
</template>

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

html

<template>
  <HLButton id="text-blue" color="blue" variant="text" link loading>Click me</HLButton>
  <HLButton id="text-green" color="green" variant="text" loading>Click me</HLButton>
  <HLButton id="text-gray" color="gray" variant="text" loading>Click me</HLButton>
  <HLButton id="text-orange" color="orange" variant="text" loading>Click me</HLButton>
  <HLButton id="text-red" color="red" variant="text" loading>Click me</HLButton>
</template>

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

html

<template>
  <HLButton id="text-blue" color="blue" variant="text" link disabled>Click me</HLButton>
  <HLButton id="text-green" color="green" variant="text" disabled>Click me</HLButton>
  <HLButton id="text-gray" color="gray" variant="text" disabled>Click me</HLButton>
  <HLButton id="text-orange" color="orange" variant="text" disabled>Click me</HLButton>
  <HLButton id="text-red" color="red" variant="text" disabled>Click me</HLButton>
</template>

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

All Sizes

All Sizes - Primary

html

<template>
  <HLButton id="size-2xl-blue" size="2xl" color="blue">Primary LG Button</HLButton>
  <HLButton id="size-xl-blue" size="xl" color="blue">Primary LG Button</HLButton>
  <HLButton id="size-lg-blue" size="lg" color="blue">Primary LG Button</HLButton>
  <HLButton id="size-md-blue" size="md" color="blue">Primary MD Button</HLButton>
  <HLButton id="size-sm-blue" size="sm" color="blue">Primary SM Button</HLButton>
  <HLButton id="size-xs-blue" size="xs" color="blue">Primary XS Button</HLButton>
  <HLButton id="size-2xs-blue" size="2xs" color="blue">Primary 2xs Button</HLButton>
  <HLButton id="size-3xs-blue" size="3xs" color="blue">Primary 3xs Button</HLButton>
</template>

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

Full Width Button

Full Width

html

<template>
  <div style="width: 240px; border: 1px solid #e0e0e0;" class="p-4">
    <HLButton id="full-width-blue" color="blue" variant="primary" fullWidth>Full Width Button</HLButton>
  </div>
  <div style="width: 240px; border: 1px solid #e0e0e0;" class="p-4 mt-2">
    <HLButton id="full-width-blue" color="blue" variant="primary" fullWidth>
      <HLEllipsis> Full Width Button with Ellipsis </HLEllipsis>
    </HLButton>
  </div>
</template>

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

Text Only Buttons

Text Only

html

<template>
  <HLButton id="size-lg-text" size="lg" variant="text">Text Only</HLButton>
</template>

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

Text with Link

html

<template>
  <HLButton id="size-lg-link" size="lg" iconPlacement="left" color="blue" variant="text" :link="true">Text with Link</HLButton>
</template>

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

Icon Buttons

html

<template>
  <HLButton id="size-lg-icon-blue" size="lg" color="blue">
    LG Button
    <template #iconLeft>
      <UserPlus01Icon class="w-3" />
    </template>
  </HLButton>
</template>

<script setup lang="ts">
  import { HLButton } from '@platform-ui/highrise'
  import { UserPlus01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Icon Only Buttons

Accessibility Requirements

Icon-only buttons must include an accessible name to comply with WCAG 2.1 AA standards (button-name rule). Use one of these approaches:

aria-label attribute (recommended)
aria-labelledby pointing to descriptive text (Optional: The example sr-only class given below visually hides content while keeping it accessible to screen readers)
title attribute (less preferred)

aria-label.vuearia-labelledby.vuetitle.vue

html

<!-- Using aria-label for accessibility (recommended) -->
<HLButton id="icon-only-lg" size="lg" color="blue" aria-label="Add user">
  <template #icon>
    <UserPlus01Icon />
  </template>
</HLButton>

html

<!-- Using aria-labelledby for accessibility -->
<!-- Note: the sample `sr-only` class visually hides the text but keeps it accessible to screen readers -->
<template>
  <div class="button-container" style="position: relative">
    <div id="add-user-label-visual" class="sr-only">Add user</div>
    <HLButton id="icon-only-sm" size="sm" color="blue" aria-labelledby="add-user-label-visual">
      <template #icon>
        <UserPlus01Icon />
      </template>
    </HLButton>
  </div>
</template>
<style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>

html

<!-- Using title attribute for accessibility -->
<HLButton id="icon-only-2xs" size="2xs" color="blue" title="Add user">
  <template #icon>
    <UserPlus01Icon />
  </template>
</HLButton>

Button as Link

<HLButton id="link-lg" size="lg" color="blue"  href="https://www.google.com" target="_blank">LG Link
<template #iconRight>
  <LinkExternal02Icon class="w-3" />
</template>
</HLButton>

Vue

html

<script setup lang="ts">
  import { LinkExternal02Icon } from '@gohighlevel/ghl-icons/24/outline'
  import { HLButton } from '@platform-ui/highrise'
</script>
<template>
  <HLButton id="link-lg" size="lg" color="blue" href="https://www.google.com" target="_blank"
    >LG Link
    <template #iconRight>
      <LinkExternal02Icon class="w-3" />
    </template>
  </HLButton>
</template>

Custom Color Buttons

Vue

html

<HLButton id="custom-color-button" color="#26a6a6" :variant="variant">Custom Color Button</HLButton>

Custom Text Size

Just wrap the default slot content with HLText and customize it as per your need!

Vue

html

<HLButton id="custom-text" variant="primary" color="color" size="3xs">
  <HLText size="2xl" weight="semibold">Placeholder</HLText>
</HLButton>

Imports

import { HLButton } from '@platform-ui/highrise'
import type { HLAllColorNamesKCase, HLButtonSize, HLButtonVariant } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id *	`string \| undefined`	`undefined`	The `id` of the element
size	`'2xl' \| 'xl' \|'lg' \| 'md' \| 'sm' \| 'xs' \| '2xs' \| '3xs'` as `HLButtonSize`	`'md'`	The size of the button
color	`'blue' \| 'gray' \| 'red' \| 'orange' \| 'green' \| HLAllColorNamesKCase \| string`	`'gray'`	The color of the button. All valid `HEX`, `RGB`, `HSL`, `HSB`, and named CSS spec color values are accepted as a string
variant	`'primary' \| 'secondary' \| 'tertiary' \| 'ghost' \| 'text'` as `HLButtonVariant`	`'secondary'`	The variant of the button
disabled	`boolean`	`false`	Disabled state of the button
loading	`boolean`	`false`	Loading state of the button
link	`boolean`	`false`	Link type of button
href	`string`	`undefined`	The href of the anchor tag
target	`string`	`undefined`	The target of the anchor tag

Types

export type HLAllColorNamesKCase =
  | 'blue-dark'
  | 'blue-light'
  | 'blue'
  | 'cyan'
  | 'error'
  | 'fuchsia'
  | 'gray-blue'
  | 'gray-cool'
  | 'gray-iron'
  | 'gray-modern'
  | 'gray-neutral'
  | 'gray-true'
  | 'gray-warm'
  | 'gray'
  | 'green-light'
  | 'green'
  | 'indigo'
  | 'moss'
  | 'orange-dark'
  | 'orange'
  | 'pink'
  | 'primary'
  | 'purple'
  | 'rose'
  | 'success'
  | 'teal'
  | 'violet'
  | 'warning'
  | 'yellow'

Emits

Name	Parameters	Description
`@click`	`()`	When button is clicked

Slots

Name	Parameters	Description
default	`()`	The default content slot
icon	`()`	The icon slot for button
iconLeft	`()`	The icon slot for left side of the button
iconRight	`()`	The icon slot for right side of the button

Button ​

Default ​

Primary ​

Secondary ​

Tertiary ​

Ghost ​

Text ​

All Sizes ​

Full Width Button ​

Text Only Buttons ​

Text with Link ​

Icon Buttons ​

Icon Only Buttons ​

Button as Link ​

Custom Color Buttons ​

Custom Text Size ​

Imports ​

Props ​

Types ​

Emits ​

Slots ​

Button

Default

Primary

Secondary

Tertiary

Ghost

Text

All Sizes

Full Width Button

Text Only Buttons

Text with Link

Icon Buttons

Icon Only Buttons

Button as Link

Custom Color Buttons

Custom Text Size

Imports

Props

Types

Emits

Slots