mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-24 13:15:45 +00:00
87ad14cb2a
* fix: add missing deps for Button * fix: use correct dep Co-authored-by: Pablo <its.monotype@gmail.com> * chore: add changeset --------- Co-authored-by: Pablo <its.monotype@gmail.com> Co-authored-by: shadcn <m@shadcn.com>
144 lines
2.4 KiB
Plaintext
144 lines
2.4 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
|
|
|
|
```bash
|
|
npx shadcn-ui add button
|
|
```
|
|
|
|
<Accordion type="single" collapsible>
|
|
<AccordionItem value="manual-installation">
|
|
<AccordionTrigger>Manual Installation</AccordionTrigger>
|
|
<AccordionContent>
|
|
|
|
1. Install the `@radix-ui/react-slot` component from radix-ui:
|
|
|
|
```bash
|
|
npm install @radix-ui/react-slot
|
|
```
|
|
|
|
2.
|
|
|
|
<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>
|
|
|
|
</AccordionContent>
|
|
|
|
</AccordionItem>
|
|
</Accordion>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Button } from "@/components/ui/button"
|
|
```
|
|
|
|
```tsx
|
|
<Button variant="outline">Button</Button>
|
|
```
|
|
|
|
### Link
|
|
|
|
You can use the `buttonVariants` helper to create a link that looks like a button.
|
|
|
|
```tsx
|
|
import { buttonVariants } from "@/components/ui/button"
|
|
```
|
|
|
|
```tsx
|
|
<Link className={buttonVariants({ variant: "outline" })}>Click here</Link>
|
|
```
|
|
|
|
Alternatively, you can set the `asChild` parameter and nest the link component.
|
|
|
|
```tsx
|
|
<Button asChild>
|
|
<Link href="/login">Login</Link>
|
|
</Button>
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Primary
|
|
|
|
<ComponentExample src="/components/examples/button/demo.tsx">
|
|
<ButtonDemo />
|
|
</ComponentExample>
|
|
|
|
---
|
|
|
|
### Secondary
|
|
|
|
<ComponentExample src="/components/examples/button/secondary.tsx">
|
|
<ButtonSecondary />
|
|
</ComponentExample>
|
|
|
|
---
|
|
|
|
### Destructive
|
|
|
|
<ComponentExample src="/components/examples/button/destructive.tsx">
|
|
<ButtonDestructive />
|
|
</ComponentExample>
|
|
|
|
---
|
|
|
|
### Outline
|
|
|
|
<ComponentExample src="/components/examples/button/outline.tsx">
|
|
<ButtonOutline />
|
|
</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>
|
|
|
|
---
|
|
|
|
### As Child
|
|
|
|
<ComponentExample src="/components/examples/button/as-child.tsx">
|
|
<ButtonAsChild />
|
|
</ComponentExample>
|