UI Components
Explore and test our Vue 3 UI components. Each component is built with accessibility, performance, and customization in mind.
Button Component
Versatile button component with multiple variants, sizes, and states.
Button Variants
<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button> Button Sizes
Default Variant
Secondary Variant
Destructive Variant
Outline Variant
Icon Buttons
<Button size="icon">🔍</Button>
<Button variant="outline" size="icon">➕</Button>
<Button variant="destructive" size="icon">🗑️</Button> Button States
<Button disabled>Disabled</Button>
<Button variant="destructive" disabled>Disabled Destructive</Button> Interactive Example
Click count: 0
<Button @click="incrementCount" variant="default">Click me!</Button> Count: 0
Custom Styling
<Button variant="default" size="lg" class="w-full">Full Width Button</Button>
<Button variant="outline" class="w-full sm:w-auto">Responsive Button</Button> Button as Different Elements
<Button as="a" href="#">Link Button</Button>
<Button as="button" type="submit">Submit Button</Button> Common Use Cases
Form Actions
Navigation
Data Actions
More Components Coming Soon
Input
Form inputs with validation states
Card
Content containers with headers and actions
Modal
Overlay dialogs and popups
Dropdown
Select menus and dropdowns
Table
Data tables with sorting and pagination
Alert
Notification and alert components