# Button

A Button can be clicked by using the mouse, `ENTER` key, or `SPACEBAR` if the button has focus.

Set the `AcceptButton` or `CancelButton` property of a `Form` to allow users to click a button by pressing the `ENTER` or `ESC` keys even if the button does not have focus. This gives the form the behavior of a dialog box.

When you display a form using the `ShowDialog` method, you can use the `DialogResult` property of a button to specify the return value of `ShowDialog`.

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation.](http://docs.wisej.com/api)
{% endhint %}

## Features

### Icon

An icon can be shown on the button by setting the `Image`, `ImageList` or `ImageSource` property. The icon and text spacing can be adjusted using the `ImageSpacing` property.

![Button control showing icon and text placement options](/files/-MdTWDlHq2wQ9laVeVfC)

### Supports HTML

The Button control supports custom HTML for its value. Set the `AllowHtml` property to true. The below example contains text using the `<del>`, `<h2>`, and `<bdo>` tags.

![Button demonstrating HTML formatting capabilities](/files/-MdTSFXW61wNJj6d1EtE)

### Repeat

The Repeat functionality allows a button to raise its `Click` event repeatedly from the time it is pressed until released.

![Animated demonstration of button repeat functionality](/files/-MdTULq1qbJiE-r3vR4K)

## How to Center Button Text on Button With an Image

You can center the text on a button by doing:

```
button1.TextAlign = System.Drawing.ContentAlignment.MiddleCenter;
button1.TextImageRelation = Wisej.Web.TextImageRelation.Overlay;
```

Alternatively, you can set TextAlign to MiddleCenter and TextImageRelation to Overlay in the designer.

However, you will notice that when setting TextImageRelation to Overlay the image becomes too large. This happens because overlay by default sets the image to "contain".

There are 4 ways to fix this and resize the image to the desired size:

1. In the designer, add an ImageList (even an empty one works) and associate with the button by doing: `button1.ImageList = imageList1;` (via code or in the designer). It will use the size set on the image list.
2. Override Button, and override OnWebRender and add `config.iconSize = new Size(20,20);`.&#x20;

```
public class MyButton: Button
	{
		protected override void OnWebRender(dynamic config)
		{
			base.OnWebRender((object)config);
			config.iconSize = new Size(20,20);
		}
	}
```

3. Attach to the ControlRendered event and add `e.Config.iconSize = new Size(20,20);`
4. Set the iconSize property of the button in the theme:<br>

<pre><code>"button": {
    "states": {
        "default": {
<strong>            "properties": {
</strong>                "iconSize": {
                    "width": 20,
                    "height": 20
                    }
            }
        }
    }
}
</code></pre>

## How to change the size of embedded icon on a button

Assign an [ImageList](/docs/controls/content/imagelist.md) to the button. Even if not using the images from the ImageList, the size set on the image becomes the size of the icon.

## Advanced

### JavaScript Widget

| Item             | Description                                                                                                                                                        |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Class name       | "wisej.web.Button"                                                                                                                                                 |
| Theme appearance | "button", see [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements).                                                                              |
| Child components | "icon" is the button's icon, if shown. "arrow" is the dropdown icon on a button with `MenuItems` set. See [JavaScript](/docs/concepts/javascript-object-model.md). |
| Source code      | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)                                                |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wisej.com/docs/controls/buttons/button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.