Button
Primary interactive element for triggering actions
All Variants
Usage
tsx
import { Button } from '@tryvienna/ui'
<Button>Button</Button>1
2
3
2
3
Examples
Default
Default
tsx
<Button>Button</Button>1
Destructive
Destructive
tsx
<Button variant="destructive">Delete</Button>1
Outline
Outline
tsx
<Button variant="outline">Outline</Button>1
Secondary
Secondary
tsx
<Button variant="secondary">Secondary</Button>1
Ghost
Ghost
tsx
<Button variant="ghost">Ghost</Button>1
Link
Link
tsx
<Button variant="link">Link Button</Button>1
All Variants
All Variants
tsx
<div className="flex flex-wrap items-center gap-4">
<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
</div>1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
All Sizes
All Sizes
tsx
<div className="flex flex-wrap items-center gap-4">
<Button size="xs">Extra Small (24px)</Button>
<Button size="sm">Small (32px)</Button>
<Button size="default">Default (40px)</Button>
<Button size="lg">Large (48px)</Button>
</div>1
2
3
4
5
6
2
3
4
5
6
With Icons
With Icons
tsx
<div className="flex flex-wrap items-center gap-4">
<Button>
<MailIcon /> Send Email
</Button>
<Button variant="destructive">
<TrashIcon /> Delete
</Button>
<Button variant="outline">
<DownloadIcon /> Download
</Button>
<Button variant="secondary">
Next <ChevronRightIcon />
</Button>
</div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Icon Buttons
Icon Buttons
tsx
<div className="flex flex-wrap items-center gap-4">
<Button size="icon-xs" variant="ghost">
<PlusIcon />
</Button>
<Button size="icon-sm" variant="ghost">
<PlusIcon />
</Button>
<Button size="icon" variant="outline">
<PlusIcon />
</Button>
<Button size="icon-lg" variant="outline">
<PlusIcon />
</Button>
</div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Loading
Loading
tsx
<div className="flex flex-wrap items-center gap-4">
<Button disabled>
<LoaderIcon className="animate-spin" /> Please wait
</Button>
<Button variant="outline" disabled>
<LoaderIcon className="animate-spin" /> Loading...
</Button>
</div>1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Disabled
Disabled
tsx
<Button disabled="true">Disabled</Button>1
Variants
| Name | Options | Default |
|---|---|---|
variant | default | destructive | outline | secondary | ghost | link | default |
size | default | xs | sm | lg | icon | 'icon-xs' | 'icon-sm' | 'icon-lg' | default |
API Reference
Button
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | default | |
size | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | default | |
asChild | boolean | false |
Also accepts all props from button.
Data Attributes
| Component | data-slot |
|---|---|
Button | "button" |