Button

Use Button component for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples

Variant

Buttons can have filled, outlined, light and text variant.

Code

<script setup lang="ts">
import { BaseButton } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseButton" color="primary" variant="filled">Filled</component>
    <component :is="BaseButton" color="primary" variant="outlined">Outlined</component>
    <component :is="BaseButton" color="primary" variant="light">Light</component>
    <component :is="BaseButton" color="primary" variant="text">Text</component>
  </div>
</template>

Color

Fill Buttons can be filled.

Outlined Buttons can be outlined.

light Buttons can have a soft colors.

text Buttons can be flat.

Code

Filled

<script setup lang="ts">
import { BaseButton } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseButton" color="primary">Primary</component>
    <component :is="BaseButton" color="secondary">Secondary</component>
    <component :is="BaseButton" color="info">Info</component>
    <component :is="BaseButton" color="success">Success</component>
    <component :is="BaseButton" color="warning">Warning</component>
    <component :is="BaseButton" color="danger">Danger</component>
  </div>
</template>

Outlined

<script setup lang="ts">
import { BaseButton } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseButton" variant="outlined" color="primary">Primary</component>
    <component :is="BaseButton" variant="outlined" color="secondary">Secondary</component>
    <component :is="BaseButton" variant="outlined" color="info">Info</component>
    <component :is="BaseButton" variant="outlined" color="success">Success</component>
    <component :is="BaseButton" variant="outlined" color="warning">Warning</component>
    <component :is="BaseButton" variant="outlined" color="danger">Danger</component>
  </div>
</template>

Light

<script setup lang="ts">
import { BaseButton } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseButton" variant="light" color="primary">Primary</component>
    <component :is="BaseButton" variant="light" color="secondary">Secondary</component>
    <component :is="BaseButton" variant="light" color="info">Info</component>
    <component :is="BaseButton" variant="light" color="success">Success</component>
    <component :is="BaseButton" variant="light" color="warning">Warning</component>
    <component :is="BaseButton" variant="light" color="danger">Danger</component>
  </div>
</template>

Text

<script setup lang="ts">
import { BaseButton } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseButton" variant="text" color="primary">Primary</component>
    <component :is="BaseButton" variant="text" color="secondary">Secondary</component>
    <component :is="BaseButton" variant="text" color="info">Info</component>
    <component :is="BaseButton" variant="text" color="success">Success</component>
    <component :is="BaseButton" variant="text" color="warning">Warning</component>
    <component :is="BaseButton" variant="text" color="danger">Danger</component>
  </div>
</template>

Shape

Buttons have various shape.

Code

<script setup lang="ts">
import { BaseButton } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseButton" color="primary" shape="sharp">Sharp</component>
    <component :is="BaseButton" color="primary" shape="rounded">Round</component>
    <component :is="BaseButton" color="primary" shape="pill">Pill Button</component>
  </div>
</template>

Size

Button components can have various sizes.

Code

<script setup lang="ts">
import { BaseButton } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseButton" color="primary" size="xs">Button xs</component>
    <component :is="BaseButton" color="primary" size="sm">Button sm</component>
    <component :is="BaseButton" color="primary" size="md">Button md</component>
    <component :is="BaseButton" color="primary" size="lg">Button lg</component>
    <component :is="BaseButton" color="primary" size="xl">Button xl</component>
  </div>
</template>

Disabled

Buttons have their own style when disabled.

Code

<script setup lang="ts">
import { BaseButton } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseButton" disabled color="primary">Disabled</component>
    <component :is="BaseButton" disabled color="secondary">Disabled</component>
    <component :is="BaseButton" disabled color="info">Disabled</component>
    <component :is="BaseButton" disabled color="success">Disabled</component>
    <component :is="BaseButton" disabled color="warning">Disabled</component>
    <component :is="BaseButton" disabled color="danger">Disabled</component>
  </div>
</template>

Block

Button can be blocked with w-full.

Code

<script setup lang="ts">
import { BaseButton } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseButton" isBlock color="primary">Disabled</component>
    <component :is="BaseButton" isBlock color="secondary">Disabled</component>
    <component :is="BaseButton" isBlock color="info">Disabled</component>
    <component :is="BaseButton" isBlock color="success">Disabled</component>
    <component :is="BaseButton" isBlock color="warning">Disabled</component>
    <component :is="BaseButton" isBlock color="danger">Disabled</component>
  </div>
</template>

Loading

Button can have loading indicator. Click the button to trigger loading start / stop.

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseButton } from '@point-hub/papp'

const isLoading = ref(true)

const toggleLoading = () => {
  isLoading.value = !isLoading.value
}
</script>

<template>
  <div>
    <component
      :is="BaseButton"
      @click="toggleLoading()"
      :isLoading="isLoading"
      color="primary"
      variant="filled"
    >
      Filled Button
    </component>
    <component
      :is="BaseButton"
      @click="toggleLoading()"
      :isLoading="isLoading"
      color="primary"
      variant="light"
    >
      Light Button
    </component>
    <component
      :is="BaseButton"
      @click="toggleLoading()"
      :isLoading="isLoading"
      color="primary"
      variant="outlined"
    >
      Outlined Button
    </component>
    <component
      :is="BaseButton"
      @click="toggleLoading()"
      :isLoading="isLoading"
      color="primary"
      variant="text"
    >
      Text Button
    </component>
  </div>
</template>

With Icon

Buttons can have an icon.

Code

<script setup lang="ts">
import { BaseButton } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseButton" color="primary">
    <base-icon icon="i-fad-books" />
  </component>
  <component :is="BaseButton" color="primary" variant="outlined" shape="pill">
    <base-icon icon="i-fad-books" />
  </component>
  <component :is="BaseButton" color="primary"><base-icon icon="i-fad-books" /> Button</component>
  <component :is="BaseButton" color="primary" variant="outlined">
    Button <base-icon icon="i-fad-books" />
  </component>
</template>

Button API

Types

export type BaseButtonColorType =
  | 'primary'
  | 'secondary'
  | 'info'
  | 'success'
  | 'warning'
  | 'danger'
export type BaseButtonVariantType = 'filled' | 'light' | 'outlined' | 'text'
export type BaseButtonShapeType = 'sharp' | 'rounded' | 'pill'
export type BaseButtonSizeType = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
export type BaseButtonType = 'submit' | 'button' | 'reset'

Props

Name	Type	Default	Description
type	BaseButtonType	button	Button type.
variant	BaseButtonVariantType	filled	Button variant.
color	BaseButtonColorType	primary	Button color.
shape	BaseButtonShapeType	sharp	Button shape.
size	BaseButtonSizeType	md	Button size.
isBlock	boolean	false	Block button with full width.
isLoading	boolean	false	Add spinner loading indicator inside button.

Slot

#default slot for rendering button content