# Button (/docs/components/button)
## Overview [#overview]
Use a button for actions. A button should do something on the current page, submit a form, open a menu, start a task, or confirm a choice.
Use a link when the user is navigating to another page. If a link must look like a button, render the link through the button component so the visual style is shared while the semantics stay correct.
## Anatomy [#anatomy]
A button has a visible label, optional icon, variant, size, and state. The label should describe the action directly. Prefer `Save changes`, `Invite member`, or `Delete project` over vague labels like `Submit` or `Continue` when the result is specific.
## Variants [#variants]
Use the default variant for primary actions, secondary for supporting actions, outline for medium emphasis, ghost for low emphasis, link for inline actions, and destructive for dangerous actions.
## Accessibility [#accessibility]
Buttons must have accessible names. Icon-only buttons need a label through text, `aria-label`, or an equivalent pattern. Keep disabled and loading states clear so users understand why the action is unavailable.
## Installation [#installation]
CLI
Manual
```bash
npx love-ui@latest add button
```
Install the following dependencies:
```bash
npm install @base-ui-components/react
```
Import the following variables into your CSS file
```css
@theme inline {
--color-destructive-foreground: var(--destructive-foreground);
}
:root {
--destructive-foreground: oklch(0.505 0.213 27.518);
}
.dark {
--destructive-foreground: oklch(0.704 0.191 22.216);
}
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
## Usage [#usage]
```tsx
import { Button } from "@/components/ui/button"
```
```tsx
```
## Link [#link]
You can use the [`render`](https://base-ui.com/react/utils/use-render#migrating-from-radix-ui) prop to make another component look like a button. Here's an example of a link that looks like a button.
```tsx
import Link from "next/link"
import { Button } from "@/components/ui/button"
export function LinkAsButton() {
return }>Login
}
```
## Examples [#examples]
The examples show variants, sizes, icon layouts, disabled state, link rendering, and loading behavior.
### Default [#default]
### Outline [#outline]
### Secondary [#secondary]
### Destructive [#destructive]
### Destructive Outline [#destructive-outline]
### Ghost [#ghost]
### Link [#link-1]
### Extra-small Size [#extra-small-size]
### Small Size [#small-size]
### Large Size [#large-size]
### Extra-large Size [#extra-large-size]
### Disabled [#disabled]
### Icon [#icon]
### Icon Small Size [#icon-small-size]
### Icon Large Size [#icon-large-size]
### With Icon [#with-icon]
### With Link [#with-link]
### Loading [#loading]