# Button

```ts
import { Button } from 'cx/widgets';
```



Buttons trigger actions when clicked. They support various visual styles, icons, and built-in confirmation dialogs.

```tsx
import { Button } from "cx/widgets";

export default (
  <div className="flex flex-wrap gap-2 items-center">
    <Button>Regular</Button>
    <Button pressed>Pressed</Button>
    <Button disabled>Disabled</Button>
  </div>
);

```

Use `pressed` to show a toggled state, and `disabled` to prevent interaction.

## Mods

Buttons support visual modifiers: `primary` for main actions, `danger` for destructive actions, and `hollow` for secondary actions.

```tsx
import { Button } from "cx/widgets";

export default (
  <div className="flex flex-col gap-4">
    <div className="flex flex-wrap gap-2 items-center">
      <Button mod="primary">Primary</Button>
      <Button mod="primary" pressed>
        Pressed
      </Button>
      <Button mod="primary" disabled>
        Disabled
      </Button>
    </div>

    <div className="flex flex-wrap gap-2 items-center">
      <Button mod="danger">Danger</Button>
      <Button mod="danger" pressed>
        Pressed
      </Button>
      <Button mod="danger" disabled>
        Disabled
      </Button>
    </div>

    <div className="flex flex-wrap gap-2 items-center">
      <Button mod="secondary">Secondary</Button>
      <Button mod="secondary" pressed>
        Pressed
      </Button>
      <Button mod="secondary" disabled>
        Disabled
      </Button>
    </div>

    <div className="flex flex-wrap gap-2 items-center">
      <Button mod="hollow">Hollow</Button>
      <Button mod="hollow" pressed>
        Pressed
      </Button>
      <Button mod="hollow" disabled>
        Disabled
      </Button>
    </div>
  </div>
);

```

## Icons

Add icons using the `icon` prop. Buttons can have both icon and text, or just an icon.

```tsx
import { Button } from "cx/widgets";
import "../../icons/lucide";

export default (
  <div className="flex flex-wrap gap-2 items-center">
    <Button icon="search">Search</Button>
    <Button icon="plus" mod="primary">Add</Button>
    <Button icon="pencil" mod="hollow" />
    <Button icon="refresh-cw" mod="hollow" />
    <Button icon="x" mod="hollow" />
  </div>
);

```

## Confirmation

Use the `confirm` prop to show a confirmation dialog before executing the `onClick` handler.

```tsx
import { Button, MsgBox } from "cx/widgets";

export default (
  <div className="flex flex-wrap gap-2 items-center">
    <Button
      mod="danger"
      confirm="Are you sure you want to delete this item?"
      onClick={() => MsgBox.alert("Item deleted!")}
    >
      Delete
    </Button>
  </div>
);

```

To enable CxJS-based confirmation dialogs, call `enableMsgBoxAlerts()` at application startup:

```js
import { enableMsgBoxAlerts } from "cx/widgets";
enableMsgBoxAlerts();
```

## Configuration

| Property           | Type               | Description                                           |
| ------------------ | ------------------ | ----------------------------------------------------- |
| `text`             | `StringProp`       | Button text content.                                  |
| `icon`             | `StringProp`       | Name of the icon to display.                          |
| `mod`              | `string`           | Visual modifier: `primary`, `danger`, `hollow`.       |
| `pressed`          | `BooleanProp`      | Shows the button in a pressed/toggled state.          |
| `disabled`         | `BooleanProp`      | Disables the button.                                  |
| `enabled`          | `BooleanProp`      | Inverse of disabled.                                  |
| `confirm`          | `string \| object` | Confirmation message or MsgBox configuration.         |
| `dismiss`          | `boolean`          | If true, closes the parent overlay when clicked.      |
| `submit`           | `boolean`          | Sets `type="submit"` for form submission.             |
| `type`             | `string`           | Button type: `submit` or `button`. Default: `button`. |
| `focusOnMouseDown` | `boolean`          | Allow focus on mouse click. Default: `false`.         |
| `onClick`          | `function`         | Click handler: `(e, instance) => void`.               |