# Button

A macOS push button with bordered, prominent, and destructive variants.

> 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).



<ComponentPreview name="button/Basic" />

## Import [#import]

```rust
use maccn::{ButtonVariant, MacButton, MacControlSize};
```

## Usage [#usage]

```rust
MacButton::new("save").child("Save");

MacButton::new("delete")
    .variant(ButtonVariant::Destructive)
    .child("Delete");
```

## Variants [#variants]

<ComponentPreview name="button/Variants" />

```rust
use gpui::div;
use maccn::{ButtonVariant, MacButton};

div()
    .flex()
    .items_center()
    .gap_2()
    .child(MacButton::new("btn-bordered").child("Bordered"))
    .child(
        MacButton::new("btn-prominent")
            .variant(ButtonVariant::Prominent)
            .child("Prominent"),
    )
    .child(
        MacButton::new("btn-destructive")
            .variant(ButtonVariant::Destructive)
            .child("Delete"),
    )
```

## Sizes [#sizes]

<ComponentPreview name="button/Sizes" />

```rust
use gpui::div;
use maccn::{ButtonVariant, MacButton, MacControlSize};

div()
    .flex()
    .items_center()
    .gap_2()
    .child(
        MacButton::new("btn-xl")
            .size(MacControlSize::ExtraLarge)
            .variant(ButtonVariant::Prominent)
            .child("Extra Large"),
    )
    .child(
        MacButton::new("btn-l")
            .size(MacControlSize::Large)
            .child("Large"),
    )
    .child(MacButton::new("btn-r").child("Regular"))
    .child(MacButton::new("btn-s").size(MacControlSize::Small).child("Small"))
    .child(MacButton::new("btn-m").size(MacControlSize::Mini).child("Mini"))
```

## Disabled [#disabled]

<ComponentPreview name="button/Disabled" />

```rust
use gpui::div;
use maccn::{ButtonVariant, MacButton};

div()
    .flex()
    .items_center()
    .gap_2()
    .child(MacButton::new("btn-d1").disabled(true).child("Bordered"))
    .child(
        MacButton::new("btn-d2")
            .variant(ButtonVariant::Prominent)
            .disabled(true)
            .child("Prominent"),
    )
    .child(
        MacButton::new("btn-d3")
            .variant(ButtonVariant::Destructive)
            .disabled(true)
            .child("Delete"),
    )
```

## API [#api]

### Props [#props]

| Prop       | Type             | Default    |
| ---------- | ---------------- | ---------- |
| `variant`  | `ButtonVariant`  | `Bordered` |
| `size`     | `MacControlSize` | `Regular`  |
| `disabled` | `bool`           | `false`    |

### Variants [#variants-1]

| Variant       | Description                        |
| ------------- | ---------------------------------- |
| `Bordered`    | Neutral bordered button (default). |
| `Prominent`   | Accent-filled button.              |
| `Destructive` | Red bordered destructive button.   |

### Events [#events]

| Event      | Payload                                |
| ---------- | -------------------------------------- |
| `on_click` | `(&ClickEvent, &mut Window, &mut App)` |