Button

<script setup lang="ts">
import { VxButton } from 'veloxui'
</script>

<template>
  <VxButton>Default</VxButton>
  <VxButton variant="secondary">Secondary</VxButton>
  <VxButton variant="destructive">Destructive</VxButton>
  <VxButton variant="outline">Outline</VxButton>
  <VxButton variant="ghost">Ghost</VxButton>
  <VxButton variant="link">Link</VxButton>
</template>

Sizes

<script setup lang="ts">
import { VxButton } from 'veloxui'
import IconPlus from './icons/IconPlus.vue'
</script>

<template>
  <VxButton size="sm">Small</VxButton>
  <VxButton>Default</VxButton>
  <VxButton size="lg">Large</VxButton>
  <VxButton size="icon" :icon="IconPlus" />
</template>

Icon

<script setup lang="ts">
import { VxButton } from 'veloxui'
import IconMail from './icons/IconMail.vue'
import IconHeart from './icons/IconHeart.vue'
import IconTrash from './icons/IconTrash.vue'
</script>

<template>
  <VxButton :icon="IconMail">Mail</VxButton>
  <VxButton variant="outline" :icon="IconHeart">Like</VxButton>
  <VxButton variant="destructive" :icon="IconTrash">Delete</VxButton>
</template>

Round & Circle

<script setup lang="ts">
import { VxButton } from 'veloxui'
import IconSearch from './icons/IconSearch.vue'
import IconPlus from './icons/IconPlus.vue'
import IconTrash from './icons/IconTrash.vue'
</script>

<template>
  <VxButton round>Default</VxButton>
  <VxButton circle :icon="IconSearch" />
  <VxButton circle variant="outline" :icon="IconPlus" />
  <VxButton circle variant="destructive" :icon="IconTrash" />
</template>

Button Group

<script setup lang="ts">
import { VxButton, VxButtonGroup } from 'veloxui'
</script>

<template>
  <VxButtonGroup>
    <VxButton variant="outline">Left</VxButton>
    <VxButton variant="outline">Center</VxButton>
    <VxButton variant="outline">Right</VxButton>
  </VxButtonGroup>

  <VxButtonGroup divided>
    <VxButton>One</VxButton>
    <VxButton>Two</VxButton>
    <VxButton>Three</VxButton>
  </VxButtonGroup>
</template>

Disabled

<script setup lang="ts">
import { VxButton } from 'veloxui'
</script>

<template>
  <VxButton disabled>Default</VxButton>
  <VxButton variant="outline" disabled>Outline</VxButton>
  <VxButton variant="destructive" disabled>Destructive</VxButton>
</template>

Loading

<script setup lang="ts">
import { VxButton } from 'veloxui'
</script>

<template>
  <VxButton loading>Loading</VxButton>
  <VxButton variant="outline" loading>Loading</VxButton>
  <VxButton bg="#4a7cc9" loading>Loading</VxButton>
</template>

Loading Icon

<script setup lang="ts">
import { VxButton } from 'veloxui'
import SpinnerDots from './icons/SpinnerDots.vue'
</script>

<template>
  <VxButton loading :loadingIcon="SpinnerDots">Dots</VxButton>
</template>

Custom Background

<script setup lang="ts">
import { VxButton } from 'veloxui'
</script>

<template>
  <VxButton bg="#2563eb">Blue</VxButton>
  <VxButton bg="#16a34a">Green</VxButton>
  <VxButton bg="linear-gradient(135deg, #2563eb, #06b6d4)">Gradient</VxButton>
</template>

Props

Prop	Type	Default	Description
variant	'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link'	'default'	Visual style
size	'sm' | 'default' | 'lg' | 'icon'	'default'	Button size
icon	Component	—	Icon component
round	boolean	false	Pill-shaped
circle	boolean	false	Circle icon-only
disabled	boolean	false	Disabled state
loading	boolean	false	Loading with text
loadingIcon	Component	built-in spinner	Custom loading icon
bg	string	''	Custom background
buttonClass	string | string[] | Record<string, boolean>	''	Custom CSS class