# Button

> `Button` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`.

Source: https://ui.jcsoftdev.com/docs/components/button

`Button` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`.

## Import

```ts
import { Button } from "@jcsoftdev/ui/atoms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/atoms/button`.

## Usage

```tsx
<Button variant="primary" size="md">
  Reservar corte
</Button>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"primary" \| "secondary" \| "ghost" \| "danger"` | `"secondary"` |  |
| `size` | `"sm" \| "md"` | `"md"` |  |
| `loading` | `boolean` |  |  |
| `asChild` | `boolean` |  | Render the child element (via Radix Slot) instead of a `<button>`, e.g. a link. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/atoms-button--default)
- [Secondary](/storybook/?path=/story/atoms-button--secondary)
- [Ghost](/storybook/?path=/story/atoms-button--ghost)
- [Danger](/storybook/?path=/story/atoms-button--danger)
- [Small](/storybook/?path=/story/atoms-button--small)
- [Loading](/storybook/?path=/story/atoms-button--loading)
- [Disabled](/storybook/?path=/story/atoms-button--disabled)
- [With Icon](/storybook/?path=/story/atoms-button--with-icon)
- [As Link](/storybook/?path=/story/atoms-button--as-link)
- [Long Label](/storybook/?path=/story/atoms-button--long-label)

## Source

`packages/ui/src/atoms/button/button.tsx`