# Button

Button with a caption, icon, and click event.

URL: https://webrad.atentor.com/docs/button
Updated: 2026-11-07

WebButton · Standard · Visual · 5 events

## Quick start

Add **Button1** in the Designer. Use the example in a page method.

```ts
Button1.caption = 'Save';
Button1.enabled = true;
Button1.onClick = async (sender) => {
  sender.enabled = false;
  try { Message('Saved'); }
  finally { sender.enabled = true; }
};
// Button1.click();
```

- Configure caption and icon in the Inspector.
- Link the action in **Interaction → OnClick**. Use enabled to prevent further activation during a task.
- click() activates the button from code. For a button with only a Lucide icon, use [Icon](https://webrad.atentor.com/docs/icon).

## Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

| Property / source | Type and options | Default | Runtime access |
| --- | --- | --- | --- |
| `name` — Name · Identity | `string` | `—` | name |
| `x` — Left · Size & position | `number` | `0` | x |
| `y` — Top · Size & position | `number` | `0` | y |
| `width` — Width · Size & position | `number` | `100` | width |
| `height` — Height · Size & position | `number` | `36` | height |
| `itemWidth` — Responsive width · Responsive size — Fit content grows the item to its widest rendered child and preserves child intrinsic widths; minimum and maximum width remain limits. | `enum` — `fixed` `stretch` `fit-content` | `"fixed"` | Inspector / configuration |
| `itemHeight` — Responsive height · Responsive size — Fit content grows the item to its lowest rendered child and preserves child intrinsic heights; minimum and maximum height remain limits. | `enum` — `fixed` `stretch` `fit-content` | `"fixed"` | Inspector / configuration |
| `itemMinWidth` — Minimum width · Responsive size | `number` | `0` | Inspector / configuration |
| `itemMaxWidth` — Maximum width · Responsive size | `number` | `null` | Inspector / configuration |
| `itemMinHeight` — Minimum height · Responsive size | `number` | `0` | Inspector / configuration |
| `itemMaxHeight` — Maximum height · Responsive size | `number` | `null` | Inspector / configuration |
| `itemGrow` — Grow · Responsive size | `number` | `0` | Inspector / configuration |
| `itemShrink` — Shrink · Responsive size — Allows fixed and stretch flow items to yield space. Fit-content keeps its intrinsic size so its children are not compressed. | `boolean` | `true` | Inspector / configuration |
| `itemAlignSelf` — Item alignment · Responsive size — Cross-axis alignment for this item in a row or column. Auto inherits the parent alignment; responsive cross-axis stretch retains its sizing behavior. | `enum` — `auto` `start` `center` `end` `stretch` | `"auto"` | Inspector / configuration |
| `itemHorizontalAnchor` — Horizontal anchor · Anchors & offsets | `enum` — `start` `center` `end` `stretch` | `"start"` | Inspector / configuration |
| `itemVerticalAnchor` — Vertical anchor · Anchors & offsets | `enum` — `start` `center` `end` `stretch` | `"start"` | Inspector / configuration |
| `itemLeft` — Left inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `itemRight` — Right inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `itemTop` — Top inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `itemBottom` — Bottom inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `margin` — Margin · Spacing — Outer spacing on all four sides, in pixels. Row and column layouts include this spacing between components. | `number` | `0` | margin |
| `marginTop` — Margin top · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginTop |
| `marginRight` — Margin right · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginRight |
| `marginBottom` — Margin bottom · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginBottom |
| `marginLeft` — Margin left · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginLeft |
| `visible` — Visible · Behavior | `boolean` | `true` | visible |
| `collapseWhenHidden` — Collapse when hidden · Behavior — Removes the component from the layout while it is not visible. | `boolean` | `true` | collapseWhenHidden |
| `enabled` — Enabled · Behavior | `boolean` | `true` | enabled |
| `tabIndex` — TabIndex · Behavior | `number` | `0` | tabIndex |
| `caption` — Caption · Appearance | `string` | `"Button"` | caption |
| `icon` — Icon · Appearance — Choose the icon used by this button when its style shows an icon. | `icon`213 options — `add` `chevron-down` `chevron-right` `close` `delete` `folder-open` `info` `layers` `lightbulb` `palette` `page` `play` `redo` `save` `search` `settings` `style` `undo` `arrow-left` `arrow-right` `arrow-up` `arrow-down` `chevron-left` `chevron-up` `chevrons-left` `chevrons-right` `chevrons-up` `chevrons-down` `menu` `more-horizontal` `more-vertical` `home` `external-link` `check` `check-circle` `check-square` `minus` `minus-circle` `plus-circle` `edit` `copy` `cut` `clipboard` `download` `upload` `refresh` `link` `unlink` `share` `send` `printer` `archive` `eye` `eye-off` `lock` `unlock` `filter` `sort-asc` `sort-desc` `warning` `alert-circle` `help-circle` `bell` `bookmark` `flag` `heart` `star` `folder` `file` `file-plus` `file-text` `text` `image` `camera` `database` `table` `list` `grid` `chart-bar` `chart-line` `code` `terminal` `cloud` `upload-cloud` `download-cloud` `user` `users` `user-plus` `mail` `phone` `globe` `map-pin` `calendar` `clock` `pause` `stop` `skip-back` `skip-forward` `volume-2` `volume-x` `video` `login` `logout` `sign-in` `sign-out` `door-in` `door-out` `door-open` `door-closed` `key` `key-round` `shield` `shield-check` `shield-alert` `shield-x` `fingerprint` `badge-check` `id-card` `user-check` `user-x` `user-minus` `user-round` `contact` `accessibility` `password` `at-sign` `scan-face` `circle` `circle-dot` `square` `move` `maximize` `minimize` `expand` `shrink` `fullscreen` `panel-left` `panel-right` `panel-top` `panel-bottom` `sidebar-left` `sidebar-right` `layout` `columns` `rows` `align-left` `align-center` `align-right` `align-justify` `rotate-cw` `rotate-ccw` `repeat` `folder-plus` `folder-minus` `folder-x` `folder-search` `folder-check` `folder-lock` `file-minus` `file-x` `file-check` `file-code` `file-image` `file-video` `file-audio` `file-archive` `file-lock` `file-search` `file-copy` `files` `hard-drive` `server` `cpu` `monitor` `laptop` `smartphone` `tablet` `wifi` `bluetooth` `message-circle` `message-square` `messages-square` `message-plus` `message-x` `inbox` `outbox` `reply` `reply-all` `forward-mail` `paperclip` `attachment` `rss` `megaphone` `microphone` `microphone-off` `headset` `radio` `sms` `cart` `shopping-bag` `credit-card` `receipt` `wallet` `dollar-sign` `percent` `tags` `gift` `truck` `building` `briefcase` `target` `trophy` `toggle-right` | `"add"` | icon |
| `currentRowBindings` — Current row · Data — Bind writable visual values to fields of this repeated row. | `current-row-bindings` — Editor: current-row-bindings | `[]` | currentRowBindings |

## API in code

| Member | Signature | Access |
| --- | --- | --- |
| `caption` | `caption: string;` | Read and write |
| `icon` | `icon: WebButtonIcon;` | Read and write |
| `onClick` | `set onClick(handler: WebComponentEventHandler<this> \| null);` | Read and write |

### `click`

method

```ts
click(): void;
```

Example

```ts
Button1.click();
```

Inherited members (27)

| Member | Signature | Access |
| --- | --- | --- |
| `currentRowBindings` | `currentRowBindings: readonly WebCurrentRowBinding[];` | Read and write |
| `element` | `readonly element: TElement;` | Read-only |
| `id` | `readonly id: string;` | Read-only |
| `name` | `readonly name: string;` | Read-only |
| `visible` | `visible: boolean;` | Read and write |
| `collapseWhenHidden` | `collapseWhenHidden: boolean;` | Read and write |
| `enabled` | `enabled: boolean;` | Read and write |
| `x` | `x: number;` | Read and write |
| `y` | `y: number;` | Read and write |
| `width` | `width: number;` | Read and write |
| `height` | `height: number;` | Read and write |
| `margin` — Outer spacing on all four sides, in pixels. | `margin: number;` | Read and write |
| `marginTop` | `marginTop: number;` | Read and write |
| `marginRight` | `marginRight: number;` | Read and write |
| `marginBottom` | `marginBottom: number;` | Read and write |
| `marginLeft` | `marginLeft: number;` | Read and write |
| `alignSelf` | `alignSelf: RuntimeLayoutAlignSelf;` | Read and write |
| `tabIndex` | `tabIndex: number;` | Read and write |
| `backgroundColor` | `backgroundColor: string;` | Read and write |
| `color` | `color: string;` | Read and write |
| `borderColor` | `borderColor: string;` | Read and write |

### `focus`

method

```ts
focus(options?: FocusOptions): void;
```

### `show`

method

```ts
show(): void;
```

### `hide`

method

```ts
hide(): void;
```

### `bindEvent`

method

```ts
bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;
```

### `emit`

method

```ts
emit(eventName: string, detail?: unknown): boolean;
```

### `dispose`

method

```ts
dispose(): void;
```

## Events

Link methods in **Interaction**. [How to use events](https://webrad.atentor.com/docs/interactions).

### OnClick

Standard event (Event).

Signature and example

```ts
import type { WebButton } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Button1Click(
    sender: WebButton,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```

### OnFocus

Standard event (Event).

Signature and example

```ts
import type { WebButton } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Button1Focus(
    sender: WebButton,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```

### OnBlur

Standard event (Event).

Signature and example

```ts
import type { WebButton } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Button1Blur(
    sender: WebButton,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```

### OnMouseEnter

Standard event (Event).

Signature and example

```ts
import type { WebButton } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Button1MouseEnter(
    sender: WebButton,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```

### OnMouseLeave

Standard event (Event).

Signature and example

```ts
import type { WebButton } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Button1MouseLeave(
    sender: WebButton,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```