Button

Flexible button component with semantic variants, sizes, outline styles, icon support, loading state, and button groups.

<x-button>

Solid Semantic Variants

Use variant to pick the role. All variants use Veldora design tokens — no hardcoded colours.

<x-button variant="primary">Primary</x-button>
<x-button variant="secondary">Secondary</x-button>
<x-button variant="success">Success</x-button>
<x-button variant="danger">Danger</x-button>
<x-button variant="warning">Warning</x-button>
<x-button variant="ghost">Ghost</x-button>

Outline Variants

Transparent background with coloured border. Ideal for secondary actions alongside a solid primary button.

<x-button variant="outline-primary">Outline Primary</x-button>
<x-button variant="outline-secondary">Outline Neutral</x-button>
<x-button variant="outline-danger">Outline Danger</x-button>

Sizes

Three built-in sizes: sm, md (default), and lg.

<x-button variant="primary" size="sm">Small</x-button>
<x-button variant="primary" size="md">Medium</x-button>
<x-button variant="primary" size="lg">Large</x-button>

With Icons

Inline SVG icons sit flush with the label thanks to the flex gap built into .vui-btn.

<x-button variant="primary" icon-left="download">Download</x-button>
<x-button variant="secondary" icon-right="settings">Settings</x-button>
<x-button variant="danger" icon-left="trash">Delete</x-button>

Loading & Disabled States

Show feedback during async operations or lock unavailable actions.

<x-button variant="primary" :loading="true">Saving...</x-button>
<x-button variant="secondary" :disabled="true">Unavailable</x-button>

Button Group

Attach buttons into a segmented control using .vui-btn-group.

<x-button-group>
    <x-button variant="primary" size="sm">Daily</x-button>
    <x-button variant="secondary" size="sm">Weekly</x-button>
    <x-button variant="secondary" size="sm">Monthly</x-button>
</x-button-group>

Skeuomorphic — Beveled Embossed Button

3D physical press simulation with specular highlight highlight, inset depth on active, and multi-layer box-shadow bevel.

<button class="vui-btn-skeuo">Deploy Now</button>
<button class="vui-btn-skeuo vui-btn-skeuo-neutral">Settings</button>
<button class="vui-btn-skeuo vui-btn-skeuo-danger">Delete</button>

Flat Minimal 2D Button

Pure flat design — no shadows, no gradients. Bold colour fill with strict 2D border-radius. Outline variant also available.

<button class="vui-btn-flat">Publish</button>
<button class="vui-btn-flat vui-btn-flat-outline">Edit Draft</button>
<button class="vui-btn-flat vui-btn-flat-neutral">Cancel</button>

Neumorphic Soft UI Button

Extruded dual-shadow soft plate that physically recesses inward on click — pure CSS depth illusion.

<button class="vui-btn-neumorphic">Default</button>
<button class="vui-btn-neumorphic vui-btn-neumorphic-accent">New Project</button>

Glassmorphism Button

Frosted-glass effect with backdrop-blur, translucent tinted fill, and soft outer glow. Perfect for hero sections over dark imagery.

<button class="vui-btn-glass">Get Started</button>
<button class="vui-btn-glass vui-btn-glass-neutral">Learn More</button>

← Previous Combobox Next → Dropdown