# Button (/buttons/button)





<ComponentPreview name="button-preskok-demo" description="Button variants, pending state, icon-only buttons, disabled state, and link-style buttons." />

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger id="cli">
      CLI
    </TabsTrigger>

    <TabsTrigger id="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent id="cli">
    ```bash
    npx shadcn@latest add @preskok/button
    ```
  </TabsContent>

  <TabsContent id="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.

        <ComponentSource name="button" title="registry/preskok/ui/preskok-ui/button.tsx" />
      </Step>

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

## Usage [#usage]

```tsx
import { Button } from "@/components/ui/preskok-ui/button"

export function ButtonDemo() {
  return (
    <Button intent="primary" size="md">
      Click me
    </Button>
  )
}
```

## Props [#props]

| Prop         | Type                                                                        | Default     | Description              |
| ------------ | --------------------------------------------------------------------------- | ----------- | ------------------------ |
| `intent`     | `"primary" \| "secondary" \| "warning" \| "danger" \| "outline" \| "plain"` | `"primary"` | Visual style variant     |
| `size`       | `"xs" \| "sm" \| "md" \| "lg" \| "sq-xs" \| "sq-sm" \| "sq-md" \| "sq-lg"`  | `"md"`      | Button size              |
| `isCircle`   | `boolean`                                                                   | `false`     | Circular button shape    |
| `isPending`  | `boolean`                                                                   | `false`     | Pending, focusable state |
| `isDisabled` | `boolean`                                                                   | `false`     | Disabled state           |
| `className`  | `string`                                                                    | -           | Additional CSS classes   |
| `ref`        | `React.Ref<HTMLButtonElement>`                                              | -           | Button element ref       |

React Aria button props such as `onPress`, `type`, `isPending`, and `isDisabled` are also supported. Use the [Link](/text/link) component with `buttonStyles` for links that should look like buttons.

## Examples [#examples]

<ComponentPreview name="button-preskok-demo" description="Live examples for intents, pending state, disabled state, icon buttons, circular buttons, and Link buttons." />

## Features [#features]

* **Multiple variants** - Six different visual styles
* **Flexible sizing** - Regular and square size options
* **Icon support** - Easy integration with icons
* **Pending state** - React Aria `isPending` support with accessible progress semantics
* **Accessibility** - Proper focus management and ARIA support
* **Link styling** - Reuse `buttonStyles` on the Link component for semantic links