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

<template>
  <div>
    <base-button color="primary" variant="filled">Filled</base-button>
    <base-button color="primary" variant="outlined">Outlined</base-button>
    <base-button color="primary" variant="light">Light</base-button>
    <base-button color="primary" variant="text">Text</base-button>
  </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

<template>
  <div>
    <base-button color="primary">Primary</base-button>
    <base-button color="secondary">Secondary</base-button>
    <base-button color="info">Info</base-button>
    <base-button color="success">Success</base-button>
    <base-button color="warning">Warning</base-button>
    <base-button color="danger">Danger</base-button>
  </div>
</template>

Outlined

<template>
  <div>
    <base-button variant="outlined" color="primary">Primary</base-button>
    <base-button variant="outlined" color="secondary">Secondary</base-button>
    <base-button variant="outlined" color="info">Info</base-button>
    <base-button variant="outlined" color="success">Success</base-button>
    <base-button variant="outlined" color="warning">Warning</base-button>
    <base-button variant="outlined" color="danger">Danger</base-button>
  </div>
</template>

Light

<template>
  <div>
    <base-button variant="light" color="primary">Primary</base-button>
    <base-button variant="light" color="secondary">Secondary</base-button>
    <base-button variant="light" color="info">Info</base-button>
    <base-button variant="light" color="success">Success</base-button>
    <base-button variant="light" color="warning">Warning</base-button>
    <base-button variant="light" color="danger">Danger</base-button>
  </div>
</template>

Text

<template>
  <div>
    <base-button variant="text" color="primary">Primary</base-button>
    <base-button variant="text" color="secondary">Secondary</base-button>
    <base-button variant="text" color="info">Info</base-button>
    <base-button variant="text" color="success">Success</base-button>
    <base-button variant="text" color="warning">Warning</base-button>
    <base-button variant="text" color="danger">Danger</base-button>
  </div>
</template>

Shape

Buttons have various shape.

Code

<template>
  <div>
    <base-button color="primary" shape="sharp">Sharp</base-button>
    <base-button color="primary" shape="rounded">Round</base-button>
    <base-button color="primary" shape="pill">Pill Button</base-button>
  </div>
</template>

Size

Button components can have various sizes.

Code

<template>
  <div>
    <base-button color="primary" size="xs">Button xs</base-button>
    <base-button color="primary" size="sm">Button sm</base-button>
    <base-button color="primary" size="md">Button md</base-button>
    <base-button color="primary" size="lg">Button lg</base-button>
    <base-button color="primary" size="xl">Button xl</base-button>
    <base-button color="primary" size="2xl">Button 2xl</base-button>
  </div>
</template>

Disabled

Buttons have their own style when disabled.

Code

<template>
  <div>
    <base-button disabled color="primary">Disabled</base-button>
    <base-button disabled color="secondary">Disabled</base-button>
    <base-button disabled color="info">Disabled</base-button>
    <base-button disabled color="success">Disabled</base-button>
    <base-button disabled color="warning">Disabled</base-button>
    <base-button disabled color="danger">Disabled</base-button>
  </div>
</template>

Block

Button can be blocked with w-full.

Code

<template>
  <div>
    <base-button is-block color="primary">Disabled</base-button>
    <base-button is-block color="secondary">Disabled</base-button>
    <base-button is-block color="info">Disabled</base-button>
    <base-button is-block color="success">Disabled</base-button>
    <base-button is-block color="warning">Disabled</base-button>
    <base-button is-block color="danger">Disabled</base-button>
  </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'

const isLoading = ref(true)

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

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

With Icon

Buttons can have an icon.

Code

<template>
  <base-button color="primary">
    <base-icon icon="i-fa7-duotone:books" />
  </base-button>
  <base-button color="primary" variant="outlined" shape="pill">
    <base-icon icon="i-fa7-duotone:books" />
  </base-button>
  <base-button color="primary"><base-icon icon="i-fa7-duotone:books" /> Button</base-button>
  <base-button color="primary" variant="outlined">
    Button <base-icon icon="i-fa7-duotone:books" />
  </base-button>
</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