Developer Docs

Quick reference guides with props tables, usage examples, and best practices for rapid development

Components

Form Components

Display Components

Feedback Components

Layout Components

Navigation Components

Components/Docs/Button

Button

Interactive button component with multiple variants and states

💻 Quick Examples

Button component with 8 type variants, 13 sizes, and 24 colors.

Type Variants

Sizes

Colors

States

With Icon

🔧 Props

Prop	Type	Default	Description
`class`	string	'vwfcolor-sky solid vwfsize-md'	CSS classes (type auto-detected)
`type`	string	'button'	HTML button type (button, submit, reset)
`loading`	van.State \| boolean	false	Loading state (shows spinner, disables button)
`formIncomplete`	van.State \| boolean	false	Form incomplete state (dims text to 40%)
`disabled`	van.State \| boolean	false	Disabled state
`leftIcon`	Element	null	Icon element to show on left side
`spinnerClass`	string	''	Custom spinner CSS classes
`onclick`	Function	null	Click handler
`id`	string	'button-{timestamp}'	Unique identifier (auto-generated)

💡 Usage

Basic Usage

// Default button
Button('Click me')

// With type variant
Button({ class: 'subtle' }, 'Subtle Button')
Button({ class: 'accent' }, 'Accent Button')

// With size
Button({ class: 'vwfsize-lg solid' }, 'Large Button')

// With color
Button({ class: 'vwfcolor-earth solid' }, 'Earth Button')

Loading State

const loading = van.state(false);

Button({
  loading,
  onclick: async () => {
    loading.val = true;
    await submitForm();
    loading.val = false;
  }
}, 'Submit')

With Icon

Button({
  leftIcon: span({ class: 'oj-ux-ico-plus' }),
  class: 'solid'
}, 'Add Item')

Form Submit

Button({
  type: 'submit',
  formIncomplete: van.derive(() => !email.val || !password.val),
  class: 'vwfcolor-earth solid'
}, 'Sign In')

✨ Type Variants

Button supports 8 type variants with auto-detection from class string:

solid - Default, filled background
subtle - Subtle background with hover
accent - Accented background
outerline - Transparent with colored border
secondary - White background with border
ghost - Transparent with hover
simple - Basic filled button
gradient - Gradient background

⚡️ Best Practices

Use loading state for async operations
Use formIncomplete for form validation feedback
Type is auto-detected - just add variant name to class string
Size and color use CSS variables via utility classes
Always provide meaningful button text for accessibility
Use type="submit" for form submission buttons
Combine size, color, and type in single class string: vwfcolor-earth vwfsize-lg solid

Explore More Components

Browse other component categories