@zohodesk/components/es/v1/Button/README.md

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

# Button

A composable button component with palette-based theming, loading/success status states, and flexible icon/content slots.

## Import

```jsx
import Button from '@zohodesk/components/es/v1/Button/Button';
```

## Usage

### Default

```jsx
<Button customId="saveBtn" testId="saveBtn">
  Save changes
</Button>
```

### With Palette Variants

```jsx
<Button palette="primary">Save</Button>
<Button palette="danger">Delete</Button>
<Button palette="success">Confirm</Button>
```

### With Icon

```jsx
<Button variant="icon" iconName="ZD-plus" iconSize={20} />

<Button variant="iconWithText" iconName="ZD-plus" iconPlacement="left">
  Add Item
</Button>
```

### Loading State

```jsx
<Button status="loading" loaderPlacement="overlay">
  Saving...
</Button>

<Button status="loading" loaderPlacement="start">
  Loading
</Button>
```

### Disabled / Read Only

```jsx
<Button isDisabled>Disabled</Button>
<Button isReadOnly>Read Only</Button>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `customId` | `string` | — | `data-id` attribute for automation |
| `testId` | `string` | — | `data-test-id` attribute for testing |
| `palette` | `oneOf: default, primary, secondary, danger, success` | `default` | Color palette |
| `bgAppearance` | `oneOf: filled, onHover, none` | `filled` | Background behavior |
| `borderAppearance` | `oneOf: default, onHover, none` | `default` | Border behavior |
| `variant` | `oneOf: text, icon, iconWithText` | `text` | Display variant |
| `size` | `oneOf: small, medium, large, full` | `medium` | Size variant |
| `status` | `oneOf: default, loading, success` | `default` | Status state |
| `loaderPlacement` | `oneOf: start, end, overlay` | `overlay` | Where loader appears |
| `iconName` | `string` | — | Icon name from `@zohodesk/icons` |
| `iconSize` | `number` | `16` | Icon size in pixels |
| `iconPlacement` | `oneOf: left, right` | `left` | Icon position relative to text |
| `paletteShade` | `oneOf: default, lighter` | `default` | Shade variant |
| `disabledAppearance` | `oneOf: none, dull, strike` | `dull` | Disabled visual style |
| `renderIcon` | `node \| func` | — | Custom icon render slot |
| `renderBefore` | `node \| func` | — | Slot before main content |
| `renderAfter` | `node \| func` | — | Slot after main content |
| `renderLoader` | `node \| func` | — | Custom loader render slot |
| `renderSuccess` | `node \| func` | — | Custom success render slot |
| `children` | `node` | — | Button text content |
| `type` | `oneOf: button, submit, reset` | `button` | HTML button type |
| `onClick` | `func` | — | Click event handler |
| `isDisabled` | `bool` | `false` | Disables the button |
| `isReadOnly` | `bool` | `false` | Read-only state |
| `isSelected` | `bool` | `false` | Selected/pressed state |
| `isRounded` | `bool` | `false` | Rounded border radius |
| `title` | `string` | — | Title/tooltip text |

## Customization

### Parts

| Part | Element | Description |
|---|---|---|
| `wrapper` | `<button>` root | The outermost button element |
| `text` | Typography | The text label |

### CSS Custom Properties

The `.varClass` block in `Button.module.css` defines local custom properties that size variants override:

| Property | Default | Description |
|---|---|---|
| `--local-Button-radius` | `4px` | Border radius |
| `--local-Button-gap` | `8px` | Content gap |
| `--local-Button-padding-block` | `6px` | Block padding |
| `--local-Button-padding-inline` | `15px` | Inline padding |
| `--local-Button-min-width` | `90px` | Minimum width |
| `--local-Button-spinner-size` | `16px` | Spinner/tick size |