Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Button

Atomic button element

Default

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

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

Primary

Default

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

Loading

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

Disabled

<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

Default

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

Loading

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

Disabled

<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

Default

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

Loading

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

Disabled

<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

Default

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

Loading

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

Disabled

<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

Default

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

Loading

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

Disabled

<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

<template>
  <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 with a container

Full Width

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

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

Text Only Buttons

Text Only

<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

Text with Link

<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

Icon Buttons

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

Add user

icon-only.vue

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

  <HLButton id="icon-only-md" size="md" color="blue" aria-label="Add user">
    <template #icon>
      <UserPlus01Icon class="w-3" />
    </template>
  </HLButton>

  <!-- Using aria-labelledby for accessibility -->
  <!-- Note: sr-only class visually hides the text but keeps it accessible to screen readers -->
  <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 class="w-3" />
      </template>
    </HLButton>
  </div>

  <HLButton id="icon-only-xs" size="xs" color="blue" aria-label="Add user">
    <template #icon>
      <UserPlus01Icon class="w-3" />
    </template>
  </HLButton>

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

  <HLButton id="icon-only-3xs" size="3xs" color="blue" aria-label="Add user">
    <template #icon>
      <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>

sr-only.scss

.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;
}

Button as Link

LG Link

Vue

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

Imports

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

Props

Name	Type	Default	Description
id *	string | undefined	undefined	The id of the element
size	'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'	'md'	The size of the button
color	'blue' | 'gray' | 'red' | 'orange' | 'green'	'gray'	The color of the button
variant	'primary' | 'secondary' | 'tertiary' | 'ghost' | 'text'	'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

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