BaseButton

Button component with variants, sizes, and loading state.

Variants

<template>
  <div style="display:flex;gap:8px;flex-wrap:wrap">
    <BaseButton variant="primary">Primary</BaseButton>
    <BaseButton variant="secondary">Secondary</BaseButton>
    <BaseButton variant="danger">Danger</BaseButton>
    <BaseButton variant="ghost">Ghost</BaseButton>
  </div>
</template>

Sizes

<template>
  <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
    <BaseButton size="sm">Small</BaseButton>
    <BaseButton size="md">Medium</BaseButton>
    <BaseButton size="lg">Large</BaseButton>
  </div>
</template>

States

<template>
  <div style="display:flex;gap:8px;flex-wrap:wrap">
    <BaseButton :loading="true">Loading</BaseButton>
    <BaseButton :disabled="true">Disabled</BaseButton>
  </div>
</template>

Props

Prop	Type	Default	Description
variant	primary | secondary | danger | ghost	primary	Visual style
size	sm | md | lg	md	Button size
type	button | submit | reset	button	HTML button type
disabled	boolean	false	Disables the button
loading	boolean	false	Shows spinner, disables button
block	boolean	false	Full-width button

Events

Event	Payload	Description
click	MouseEvent	Emitted on click (not when disabled or loading)

Slots

Slot	Description
default	Button label content