Button
Button component with multiple variants and sizes
Button
A button component with multiple variants and sizes.
Usage
<script setup>
import { Button } from '~/components/ui/button'
</script>
<template>
<Button>Click me</Button>
</template>
Variants
Default
<Button variant="default">
Default
</Button>
Destructive
<Button variant="destructive">
Destructive
</Button>
Outline
<Button variant="outline">
Outline
</Button>
Secondary
<Button variant="secondary">
Secondary
</Button>
Ghost
<Button variant="ghost">
Ghost
</Button>
Link
<Button variant="link">
Link
</Button>
Sizes
Default
<Button size="default">
Default
</Button>
Small
<Button size="sm">
Small
</Button>
Large
<Button size="lg">
Large
</Button>
Icon
<Button size="icon">
<Icon name="lucide:plus" />
</Button>
Props
With Icons
<Button>
<Icon name="lucide:mail" class="mr-2" />
Login with Email
</Button>