Button — Core

Buttons

Clickable actions in contextual color variants, three sizes, and outline, ghost, and icon looks, with built-in loading and disabled states.

Button Variants

<button class="vd-btn vd-btn-primary">Primary</button>
<button class="vd-btn vd-btn-secondary">Secondary</button>
<button class="vd-btn vd-btn-success">Success</button>
<button class="vd-btn vd-btn-warning">Warning</button>
<button class="vd-btn vd-btn-danger">Danger</button>
<button class="vd-btn vd-btn-info">Info</button>
<button class="vd-btn vd-btn-outline">Outline</button>
<button class="vd-btn vd-btn-outline-primary">Outline Primary</button>
<button class="vd-btn vd-btn-outline-secondary">Outline Secondary</button>

.vd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--vd-btn-padding-y) var(--vd-btn-padding-x);
  font-weight: var(--vd-font-weight-medium);
  border-radius: var(--vd-btn-border-radius);
  cursor: pointer;
  transition: all 0.15s ease;
}

.vd-btn-primary {
  background-color: var(--vd-color-primary);
  color: var(--vd-color-white);
}

Button Sizes

<button class="vd-btn vd-btn-primary vd-btn-sm">Small</button>
<button class="vd-btn vd-btn-primary">Default</button>
<button class="vd-btn vd-btn-primary vd-btn-lg">Large</button>
<button class="vd-btn vd-btn-primary vd-btn-block">Block Button</button>

.vd-btn-sm {
  padding: var(--vd-btn-padding-y-sm) var(--vd-btn-padding-x-sm);
  font-size: var(--vd-font-size-sm);
}

.vd-btn-lg {
  padding: var(--vd-btn-padding-y-lg) var(--vd-btn-padding-x-lg);
  font-size: var(--vd-font-size-lg);
}

.vd-btn-block {
  display: flex;
  width: 100%;
}

Button States

Ghost Buttons

<button class="vd-btn vd-btn-ghost">Ghost</button>
<button class="vd-btn vd-btn-ghost-primary">Ghost Primary</button>
<button class="vd-btn vd-btn-ghost-secondary">Ghost Secondary</button>
<button class="vd-btn vd-btn-ghost-success">Ghost Success</button>
<button class="vd-btn vd-btn-ghost-error">Ghost Error</button>
<button class="vd-btn vd-btn-ghost-subtle">Ghost Subtle</button>

Icon Buttons

<button class="vd-btn vd-btn-icon vd-btn-primary" aria-label="Add item"><i class="ph ph-plus"></i></button>
<button class="vd-btn vd-btn-icon vd-btn-secondary" aria-label="Edit"><i class="ph ph-pencil-simple"></i></button>
<button class="vd-btn vd-btn-icon vd-btn-success" aria-label="Confirm"><i class="ph ph-check"></i></button>
<button class="vd-btn vd-btn-icon vd-btn-danger" aria-label="Delete"><i class="ph ph-trash"></i></button>
<button class="vd-btn vd-btn-icon vd-btn-outline" aria-label="More options"><i class="ph ph-dots-three"></i></button>

Loading State

<button class="vd-btn vd-btn-primary is-loading">Loading</button>
<button class="vd-btn vd-btn-primary vd-btn-sm is-loading">Small</button>
<button class="vd-btn vd-btn-outline is-loading">Outline</button>

Class Reference

Usage

<script setup lang="ts">
import { VdButton } from "@vanduo-oss/vd3";
const saving = ref(false);
</script>

<template>
  <VdButton variant="primary" @click="save">Primary</VdButton>
  <VdButton variant="danger" size="sm">Delete</VdButton>
  <VdButton variant="ghost" :loading="saving">Save</VdButton>
</template>

Classes

Class	Description	Type
`.vd-btn`	Base button class — required on all buttons	Base
`.vd-btn-primary`	Primary action color	Variant
`.vd-btn-secondary`	Secondary/neutral action color	Variant
`.vd-btn-success`	Success/positive action color	Variant
`.vd-btn-warning`	Warning/caution action color	Variant
`.vd-btn-danger`	Danger/destructive action color — unified status name (matches Vue variant="danger")	Variant
`.vd-btn-error`	Retained backward-compatible alias for .vd-btn-danger	Variant
`.vd-btn-info`	Informational action color	Variant
`.vd-btn-outline`	Outlined button (neutral border)	Variant
`.vd-btn-outline-primary`	Outlined button with primary color	Variant
`.vd-btn-outline-secondary`	Outlined button with secondary color	Variant
`.vd-btn-sm`	Small button size	Size
`.vd-btn-lg`	Large button size	Size
`.vd-btn-block`	Full-width block button	Size
`.vd-btn-ghost`	Transparent background with hover tint	Variant
`.vd-btn-ghost-primary … .vd-btn-ghost-subtle`	Ghost with color-tinted hover states	Variant
`.vd-btn-icon`	Circular icon-only button	Modifier
`.is-loading`	Shows a spinner and disables clicks	State (class)
`.vd-btn-full`	Full-width button (inline-block)	Size
`disabled`	Disables interaction and dims button	State (attr)

Component API (Vue 3)

Prop / event	Description
`:variant`	primary \| secondary \| success \| warning \| danger \| info, or "ghost" (default "primary").
`:size`	sm \| md \| lg (default "md").
`:loading`	Shows a spinner and blocks clicks (adds .is-loading).
`:disabled`	Disables the button.
`:type`	button \| submit \| reset (default "button").
`@click`	Emitted on click (suppressed while disabled or loading).
`(outline / ghost-colour / icon)`	CSS-only classes (.vd-btn-outline, .vd-btn-ghost-primary…, .vd-btn-icon) that ship in vd3's CSS — not wrapped as VdButton props.