Components
- Accordion new
- ActionSheet new
- Alert new
- Alert Dialog new
- Angle Slider new
- Autocomplete new
- Avatar new
- Badge new
- Breadcrumb new
- Button new
- Button Group new
- Card new
- Carousel new
- Checkbox new
- Clipboard new
- Collapsible new
- Color Picker new
- Date Input new
- Date Picker new
- Dialog new
- DialogCaller new
- Drawer beta
- Editable new
- Empty new
- Field new
- Fieldset new
- File Upload new
- Filters new
- Floating Panel new
- Hover Card new
- Image new
- Image Cropper new
- Input new
- Input Group new
- Json Tree View new
- Kbd new
- Listbox new
- Marquee new
- Menu new
- Number Input new
- Pagination new
- Password Input new
- PhoneField new
- Pin Input new
- Popover new
- Progress Circular new
- Progress Linear new
- Qr Code new
- Radio Group new
- Rating Group new
- Scroll Area new
- ScrollSpy new
- Segment Group new
- Select new
- Separator new
- Sidebar new
- Signature Pad new
- Skeleton new
- Slider new
- Splitter new
- Steps new
- Switch new
- Table new
- Tabs new
- Tags Input new
- Textarea new
- Timeline new
- Timer new
- Toast new
- Toc new
- Toggle new
- Toggle Group new
- Tooltip new
- Tour new
- Tree View new
- Typography new
Button
Vue button with variants and sizes for primary actions, secondary controls, and icon buttons.
Installation
Install from the Vuzeno registry:
bunx --bun shadcn-vue@latest add https://vuzeno.com/r/button.json
npx shadcn-vue@latest add https://vuzeno.com/r/button.json
yarn dlx shadcn-vue@latest add https://vuzeno.com/r/button.json
pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/button.json
Usage
<script setup lang="ts">
import { Button } from "@/components/ui/button";
</script>
<template>
<Button variant="outline" size="sm">Button</Button>
</template>
Examples
Variants
Use the variant prop to change the visual style of the button.
Sizes
Use the size prop to change the size of the button.
Disabled
Use the native disabled attribute to disable the button.