# Button

A minimal, zero-runtime, pure HTML/Tailwind button enforcing Monolith principles.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



Basic usage of the Monolith Button.



<ComponentPreview name="button-demo">
  <div className="flex flex-col gap-4 py-8">
    <div className="flex items-center gap-4">
      <Button variant="default">
        Default
      </Button>

      <Button variant="danger">
        Danger
      </Button>

      <Button variant="outline">
        Outline
      </Button>
    </div>

    <div className="flex items-center gap-4">
      <Button variant="default" shape="pill">
        Pill Shape
      </Button>

      <Button variant="outline" shape="pill">
        Pill Outline
      </Button>

      <Button variant="default" size="icon" shape="pill">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 12h14" />

          <path d="m12 5 7 7-7 7" />
        </svg>
      </Button>
    </div>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/button.json"
```

## Usage [#usage]

After you add the component with the CLI, import it from your UI folder:

```tsx
import { Button, ButtonGroup } from "@/components/ui/button"

export function MyComponent() {
  return (
    <ButtonGroup>
      <Button variant="default">Save</Button>
      <Button variant="outline">Cancel</Button>
    </ButtonGroup>
  );
}
```

## Examples [#examples]

### Variants [#variants]

<ComponentPreview name="button-variants">
  <div className="flex items-center gap-4 py-8">
    <Button variant="default">
      Default
    </Button>

    <Button variant="secondary">
      Secondary
    </Button>

    <Button variant="danger">
      Danger
    </Button>

    <Button variant="outline">
      Outline
    </Button>

    <Button variant="ghost">
      Ghost
    </Button>

    <Button variant="link">
      Link
    </Button>
  </div>
</ComponentPreview>

### Button Group [#button-group]

Group multiple buttons together with seamless borders and protected z-index focus states.

<ComponentPreview name="button-group">
  <div className="flex flex-col gap-6 py-8">
    <ButtonGroup>
      <Button variant="outline">
        Day
      </Button>

      <Button variant="outline">
        Week
      </Button>

      <Button variant="outline">
        Month
      </Button>

      <Button variant="outline">
        Year
      </Button>
    </ButtonGroup>

    <ButtonGroup orientation="vertical" className="w-fit">
      <Button variant="outline" className="justify-start">
        Profile
      </Button>

      <Button variant="outline" className="justify-start">
        Billing
      </Button>

      <Button variant="outline" className="justify-start">
        Settings
      </Button>
    </ButtonGroup>
  </div>
</ComponentPreview>

### Icons and sizes [#icons-and-sizes]

<ComponentPreview name="button-icons">
  <div className="flex flex-col gap-6 py-8">
    <div className="flex items-center gap-4">
      <Button size="icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 12h14" />

          <path d="m12 5 7 7-7 7" />
        </svg>
      </Button>

      <Button size="sm">
        Small
      </Button>

      <Button size="default">
        Default
      </Button>

      <Button size="lg">
        Large
      </Button>
    </div>

    <div className="flex items-center gap-4">
      <Button>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
        </svg>

        {"Left Icon"}
      </Button>

      <Button>
        {"Right Icon"}

        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 12h14" />

          <path d="m12 5 7 7-7 7" />
        </svg>
      </Button>

      <Button variant="outline">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="10" />

          <path d="M12 16v-4" />

          <path d="M12 8h.01" />
        </svg>

        {"Both Icons"}

        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="m9 18 6-6-6-6" />
        </svg>
      </Button>
    </div>
  </div>
</ComponentPreview>

### Loading [#loading]

<ComponentPreview name="button-loading">
  <div className="flex items-center gap-4 py-8">
    <Button>
      Please wait
    </Button>

    <Button variant="outline">
      Submit
    </Button>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `Button` component extends the standard HTML button attributes and adds the following props:

| Prop        | Type      | Default     | Description                                                                              |
| ----------- | --------- | ----------- | ---------------------------------------------------------------------------------------- |
| `variant`   | `enum`    | `"default"` | The visual style (`default`, `danger`, `ghost`, `link`, `outline`, `secondary`).         |
| `size`      | `enum`    | `"default"` | The size (`default`, `sm`, `lg`, `icon`, `icon-sm`, `icon-lg`).                          |
| `shape`     | `enum`    | `"default"` | The corner shape (`default`, `pill`).                                                    |
| `isLoading` | `boolean` | `false`     | Displays a loading spinner and disables the button while maintaining its original width. |
| `asChild`   | `boolean` | `false`     | Render as a different element using Radix Slot.                                          |

The `ButtonGroup` component accepts standard div attributes plus:

| Prop          | Type   | Default        | Description                                        |
| ------------- | ------ | -------------- | -------------------------------------------------- |
| `orientation` | `enum` | `"horizontal"` | The layout direction (`horizontal` or `vertical`). |