# Button

The action control: primary (green, one per view), secondary, ghost and danger, in three sizes.

Source page: https://sproutboat.com/ikada/components/button

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/button.json
```
Or from the package: `import { Button } from "@sproutboat/ikada";`
## Usage
```tsx
import { Button } from "@/components/ikada/button";

<Button variant="primary">
  Plant sprout
</Button>
```
## Examples
### Variants
One primary per view. Secondary is the default; ghost sits in toolbars; danger pairs with a confirm.
```tsx
<Button variant="primary">primary</Button>
<Button>secondary</Button>
<Button variant="ghost">ghost</Button>
<Button variant="danger">danger</Button>
```
### Sizes

```tsx
<Button size="sm">Size sm</Button>
<Button>Size md</Button>
<Button size="lg">Size lg</Button>
```
### Focus
The neutral ring, drawn without focus for this page. Tab to any button to see the real one.
```tsx
<Button>Focused</Button>
```
### Loading
The label stays in the tree, a spinner takes its place, and the width holds.
```tsx
<Button variant="primary" loading>
  Deploy
</Button>
```
### Disabled

```tsx
<Button variant="primary" disabled>primary</Button>
<Button disabled>secondary</Button>
<Button variant="ghost" disabled>ghost</Button>
<Button variant="danger" disabled>danger</Button>
```
## Props
### ButtonProps
Also takes every prop of `Omit<ComponentProps<typeof BaseButton>, "className">, ButtonVariants`.
| Prop | Type | Description |
| --- | --- | --- |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
| loading? | `boolean` | Shows a spinner, sets aria-busy, ignores clicks, keeps the width and focus. Default `false`. |
| style? | `CSSProperties \| ((state: ButtonState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ButtonState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| variant? | `"danger" \| "primary" \| "secondary" \| "ghost" \| null` |  |
| size? | `"sm" \| "md" \| "lg" \| null` |  |
Source: https://github.com/baronunread/ikada/blob/main/src/components/button.tsx