mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-16 04:11:34 +00:00
74c4c7508b
* docs: review all docs * fix Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * docs(spinner): reintroduce data-icon attribute guidance in radix spinner docs (#10059) * Initial plan * docs: add data-icon attribute instructions to radix/spinner.mdx button and badge sections Co-authored-by: shadcn <124599+shadcn@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: shadcn <124599+shadcn@users.noreply.github.com> --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
162 lines
4.0 KiB
Plaintext
162 lines
4.0 KiB
Plaintext
---
|
|
title: Button
|
|
description: Displays a button or a component that looks like a button.
|
|
featured: true
|
|
base: base
|
|
component: true
|
|
---
|
|
|
|
<ComponentPreview styleName="base-nova" name="button-demo" />
|
|
|
|
## Installation
|
|
|
|
<CodeTabs>
|
|
|
|
<TabsList>
|
|
<TabsTrigger value="cli">Command</TabsTrigger>
|
|
<TabsTrigger value="manual">Manual</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="cli">
|
|
|
|
```bash
|
|
npx shadcn@latest add button
|
|
```
|
|
|
|
</TabsContent>
|
|
|
|
<TabsContent value="manual">
|
|
|
|
<Steps className="mb-0 pt-2">
|
|
|
|
<Step>Install the following dependencies:</Step>
|
|
|
|
```bash
|
|
npm install @base-ui/react
|
|
```
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource
|
|
name="button"
|
|
title="components/ui/button.tsx"
|
|
styleName="base-nova"
|
|
/>
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
</Steps>
|
|
|
|
</TabsContent>
|
|
|
|
</CodeTabs>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Button } from "@/components/ui/button"
|
|
```
|
|
|
|
```tsx
|
|
<Button variant="outline">Button</Button>
|
|
```
|
|
|
|
## Cursor
|
|
|
|
Tailwind v4 [switched](https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor) from `cursor: pointer` to `cursor: default` for the button component.
|
|
|
|
If you want to keep the `cursor: pointer` behavior, add the following code to your CSS file:
|
|
|
|
```css showLineNumbers title="globals.css"
|
|
@layer base {
|
|
button:not(:disabled),
|
|
[role="button"]:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Size
|
|
|
|
Use the `size` prop to change the size of the button.
|
|
|
|
<ComponentPreview styleName="base-nova" name="button-size" />
|
|
|
|
### Default
|
|
|
|
<ComponentPreview styleName="base-nova" name="button-default" />
|
|
|
|
### Outline
|
|
|
|
<ComponentPreview styleName="base-nova" name="button-outline" />
|
|
|
|
### Secondary
|
|
|
|
<ComponentPreview styleName="base-nova" name="button-secondary" />
|
|
|
|
### Ghost
|
|
|
|
<ComponentPreview styleName="base-nova" name="button-ghost" />
|
|
|
|
### Destructive
|
|
|
|
<ComponentPreview styleName="base-nova" name="button-destructive" />
|
|
|
|
### Link
|
|
|
|
<ComponentPreview styleName="base-nova" name="button-link" />
|
|
|
|
### Icon
|
|
|
|
<ComponentPreview styleName="base-nova" name="button-icon" />
|
|
|
|
### With Icon
|
|
|
|
Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` attribute to the icon for the correct spacing.
|
|
|
|
<ComponentPreview styleName="base-nova" name="button-with-icon" />
|
|
|
|
### Rounded
|
|
|
|
Use the `rounded-full` class to make the button rounded.
|
|
|
|
<ComponentPreview styleName="base-nova" name="button-rounded" />
|
|
|
|
### Spinner
|
|
|
|
Render a `<Spinner />` component inside the button to show a loading state. Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` attribute to the spinner for the correct spacing.
|
|
|
|
<ComponentPreview styleName="base-nova" name="button-spinner" />
|
|
|
|
### Button Group
|
|
|
|
To create a button group, use the `ButtonGroup` component. See the [Button Group](/docs/components/base/button-group) documentation for more details.
|
|
|
|
<ComponentPreview styleName="base-nova" name="button-group-demo" />
|
|
|
|
### As Link
|
|
|
|
You can use the `buttonVariants` helper to make a link look like a button.
|
|
|
|
**Do not use `<Button render={<a />} nativeButton={false} />` for links.** The Base UI `Button` component always applies `role="button"`, which overrides the semantic link role on `<a>` elements. Use `buttonVariants` with a plain `<a>` tag instead.
|
|
|
|
<ComponentPreview styleName="base-nova" name="button-render" />
|
|
|
|
## RTL
|
|
|
|
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
|
|
|
|
<ComponentPreview styleName="base-nova" name="button-rtl" direction="rtl" />
|
|
|
|
## API Reference
|
|
|
|
### Button
|
|
|
|
The `Button` component is a wrapper around the `button` element that adds a variety of styles and functionality.
|
|
|
|
| Prop | Type | Default |
|
|
| --------- | ------------------------------------------------------------------------------------ | ----------- |
|
|
| `variant` | `"default" \| "outline" \| "ghost" \| "destructive" \| "secondary" \| "link"` | `"default"` |
|
|
| `size` | `"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"` | `"default"` |
|