mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-28 15:14:12 +00:00
98 lines
1.6 KiB
Plaintext
98 lines
1.6 KiB
Plaintext
---
|
|
title: Button
|
|
description: Displays a button or a component that looks like a button.
|
|
featured: true
|
|
component: true
|
|
---
|
|
|
|
<ComponentExample src="/components/examples/button/demo.tsx">
|
|
<ButtonDemo />
|
|
</ComponentExample>
|
|
|
|
## Installation
|
|
|
|
1. Copy and paste the following code into your project.
|
|
|
|
<ComponentSource src="/components/ui/button.tsx" />
|
|
|
|
<Callout>
|
|
This is the `<Button />` primitive. You can place it in a file at
|
|
`components/ui/button.tsx`.
|
|
</Callout>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Button } from "@/components/ui/button"
|
|
```
|
|
|
|
```tsx
|
|
<Button variant="outline">Button</Button>
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Default
|
|
|
|
<ComponentExample src="/components/examples/button/demo.tsx">
|
|
<ButtonDemo />
|
|
</ComponentExample>
|
|
|
|
---
|
|
|
|
### Destructive
|
|
|
|
<ComponentExample src="/components/examples/button/destructive.tsx">
|
|
<ButtonDestructive />
|
|
</ComponentExample>
|
|
|
|
---
|
|
|
|
### Outline
|
|
|
|
<ComponentExample src="/components/examples/button/outline.tsx">
|
|
<ButtonOutline />
|
|
</ComponentExample>
|
|
|
|
---
|
|
|
|
### Subtle
|
|
|
|
<ComponentExample src="/components/examples/button/subtle.tsx">
|
|
<ButtonSubtle />
|
|
</ComponentExample>
|
|
|
|
---
|
|
|
|
### Ghost
|
|
|
|
<ComponentExample src="/components/examples/button/ghost.tsx">
|
|
<ButtonGhost />
|
|
</ComponentExample>
|
|
|
|
---
|
|
|
|
---
|
|
|
|
### Link
|
|
|
|
<ComponentExample src="/components/examples/button/link.tsx">
|
|
<ButtonLink />
|
|
</ComponentExample>
|
|
|
|
---
|
|
|
|
### With Icon
|
|
|
|
<ComponentExample src="/components/examples/button/with-icon.tsx">
|
|
<ButtonWithIcon />
|
|
</ComponentExample>
|
|
|
|
---
|
|
|
|
### Loading
|
|
|
|
<ComponentExample src="/components/examples/button/loading.tsx">
|
|
<ButtonLoading />
|
|
</ComponentExample>
|