Button ​

An interactive element used to trigger actions, submit forms, or navigate between views.

Variants ​

vue
<script setup>
import { Button } from 'frappe-ui'
</script>

<template>
  <Button variant="solid">Solid</Button>
  <Button variant="subtle">Subtle</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
</template>

Themes ​

vue
<script setup>
import { Button } from 'frappe-ui'
</script>

<template>
  <Button theme="gray">Gray</Button>
  <Button theme="blue">Blue</Button>
  <Button theme="green">Green</Button>
  <Button theme="red">Red</Button>
</template>

Sizes ​

vue
<script setup>
import { Button } from 'frappe-ui'
</script>

<template>
  <Button size="sm">Button</Button>
  <Button size="md">Button</Button>
  <Button size="lg">Button</Button>
  <Button size="xl">Button</Button>
  <Button size="2xl">Button</Button>
</template>

Icons ​

vue
<script setup>
import { Button } from 'frappe-ui'
</script>

<template>
  <Button>
    <template #icon>
      <LucideBolt class="size-4" />
    </template>
  </Button>

  <Button>
    <template #prefix>
      <LucideDownload class="size-4" />
    </template>
    Download
  </Button>

  <Button>
    <template #suffix>
      <LucideArrowRight class="size-4" />
    </template>
    Get Started
  </Button>

  <Button :loading="true"> Fetching </Button>
</template>

API Reference ​

Show types
typescript
import { type RouterLinkProps } from 'vue-router'
import { type Component } from 'vue'

type Theme = 'gray' | 'blue' | 'green' | 'red'
type Size = 'sm' | 'md' | 'md' | 'lg' | 'xl' | '2xl'
type Variant = 'solid' | 'subtle' | 'outline' | 'ghost'

export interface ButtonProps {
  /** Visual color theme of the button */
  theme?: Theme

  /** Controls the button size */
  size?: Size

  /** Visual style of the button */
  variant?: Variant

  /** Text label displayed inside the button */
  label?: string

  /** Icon shown when no left or right icon is specified */
  icon?: string | Component

  /** Icon shown before the label */
  iconLeft?: string | Component

  /** Icon shown after the label */
  iconRight?: string | Component

  /** Tooltip text shown on hover */
  tooltip?: string

  /** Shows a loading state and disables interaction */
  loading?: boolean

  /** Text shown while the button is loading */
  loadingText?: string

  /** Disables the button */
  disabled?: boolean

  /** Router destination when used as a link */
  route?: RouterLinkProps['to']

  /** External link URL */
  link?: string

  /** Native button type */
  type?: 'button' | 'submit' | 'reset'
}

/** Combined theme and variant key */
export type ThemeVariant = `${Theme}-${Variant}`
theme
= "gray"
Theme

Visual color theme of the button

size
= "sm"
Size

Controls the button size

variant
= "subtle"
Variant

Visual style of the button

label
string

Text label displayed inside the button

icon
string | Component

Icon shown when no left or right icon is specified

iconLeft
string | Component

Icon shown before the label

iconRight
string | Component

Icon shown after the label

tooltip
string

Tooltip text shown on hover

loading
= false
boolean

Shows a loading state and disables interaction

loadingText
string

Text shown while the button is loading

disabled
= false
boolean

Disables the button

route
string | kt | Tt

Router destination when used as a link

link
string

External link URL

type
= "button"
"button" | "submit" | "reset"

Native button type

prefix
—

Content shown before the button label (left icon / custom content)

icon
—

Icon-only content for icon buttons

default
—

Main button content (overrides `label`)

suffix
—

Content shown after the button label (right icon / custom content)

BreadcrumbsCalendar