WEBRAD / TECHNICAL REFERENCE

Button

Button with a caption, icon, and click event.

WebButtonStandardVisual5 events

Quick start

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

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.

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 sizeFit content grows the item to its widest rendered child and preserves child intrinsic widths; minimum and maximum width remain limits.	`enumfixed` `stretch` `fit-content`	`"fixed"`	Inspector / configuration
`itemHeight`Responsive height · Responsive sizeFit content grows the item to its lowest rendered child and preserves child intrinsic heights; minimum and maximum height remain limits.	`enumfixed` `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 sizeAllows 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 sizeCross-axis alignment for this item in a row or column. Auto inherits the parent alignment; responsive cross-axis stretch retains its sizing behavior.	`enumauto` `start` `center` `end` `stretch`	`"auto"`	Inspector / configuration
`itemHorizontalAnchor`Horizontal anchor · Anchors & offsets	`enumstart` `center` `end` `stretch`	`"start"`	Inspector / configuration
`itemVerticalAnchor`Vertical anchor · Anchors & offsets	`enumstart` `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 · SpacingOuter spacing on all four sides, in pixels. Row and column layouts include this spacing between components.	`number`	`0`	margin
`marginTop`Margin top · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginTop
`marginRight`Margin right · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginRight
`marginBottom`Margin bottom · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginBottom
`marginLeft`Margin left · SpacingOuter 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 · BehaviorRemoves 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 · AppearanceChoose 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 · DataBind 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

click(): void;

Example

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

focus(options?: FocusOptions): void;

`show`

method

show(): void;

`hide`

method

hide(): void;

`bindEvent`

method

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

`emit`

method

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

`dispose`

method

dispose(): void;

Events

Link methods in Interaction. How to use events.

OnClick

Standard event (Event).

Signature and example

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

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

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

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

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);
  }
}