# Button

![Form submit and reset buttons](https://2555990442-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXQc7GhOtVRa7Lw1InO%2F-LXQcCeGbjZ8h00A2PcZ%2F-LXQcE4sEvl3UwYKTwXn%2Fbutton.png?generation=1548799251657128\&alt=media)

### Introduction

The button pattern allows the user to input a command, with one of the following possible action types:

1. Submit form (type="submit")
2. Reset form (type="reset")
3. Run JavaScript (type="button")

The first two types of button are for use inside of a form only, due to their specific behaviour.

The third type is a general purpose button used for running client-side script. This type of button appears in many patterns:

* [Infotip](https://ebay.gitbook.io/mindpatterns/disclosure/infotip)
* [Carousel](https://ebay.gitbook.io/mindpatterns/disclosure/carousel)
* [Menu Button](https://ebay.gitbook.io/mindpatterns/input/menu-button)
* [Lightbox Dialog](https://ebay.gitbook.io/mindpatterns/disclosure/lightbox-dialog)
* and more

Another type of button is the [Toggle Button.](https://ebay.gitbook.io/mindpatterns/input/toggle-button)

**TIP:** If left unspecified, the type attribute has a default value of "submit".

### Working Examples

Experience the pattern in action on our companion [eBay MIND Patterns examples website](https://ebay.github.io/mindpatterns/input/button/index.html).

View a fully styled example on our [Skin CSS Framework](https://opensource.ebay.com/skin/component/button/).

### Best Practices

The label **must** clearly indicate the purpose of the button (i.e. not 'click here' or 'click me').

For buttons with labels that are not unique to the page (e.g. 'Add to Cart', 'Edit' or 'Delete', see the [Ambiguous Label](https://ebay.gitbook.io/mindpatterns/techniques/ambiguous-label) technique.

A button **must not** open a new page. Use a [link](https://ebay.gitbook.io/mindpatterns/navigation/link) instead.

A button **may** update the hash fragment of the URL. For example, if building a single page app experience and explicitly managing the History API.

A button **may** open any kind of [flyout](https://github.com/ebay/mindpatterns/tree/6c14ac7802634b97b44038d80935b912adbcd5cf/structure/flyout.md), [dialog](https://github.com/ebay/mindpatterns/tree/6c14ac7802634b97b44038d80935b912adbcd5cf/structure/dialog.md) or [menu](https://github.com/ebay/mindpatterns/tree/6c14ac7802634b97b44038d80935b912adbcd5cf/disclosure/menu.md) overlay.

A button **may** display a waiting/loading state, but should not be a live-region (see: [FAQ: When should a live-region be used?](https://ebay.gitbook.io/mindpatterns/appendix/faq#when-should-a-live-region-be-used)). Some screen readers automatically announce any changes to the programmatic label, and so using a live-region would trigger a second, redundant announcement.

### Interaction Design

#### Pointer

Buttons should **not** have a hand cursor. See [Hand Cursor on Buttons](https://ebay.gitbook.io/mindpatterns/antipatterns/hand-cursor-on-buttons).

#### Keyboard

If button has focus, `SPACEBAR` and `ENTER` keys should activate button.

If button has focus, `TAB` and `SHIFT-TAB` keys should move to the next or previous focusable page element respectively.

#### Screenreader

If virtual cursor is on button, it must be invokable by virtual cursor (e.g. VO+SPACE in VoiceOver).

Role of 'button' **must** be announced.

Label **must** be announced.

Any state **must** be announced (e.g. expanded, haspopup).

Any description **must** be announced (i.e. via aria-describedby).

Any change in label (e.g. a waiting/loading state) *may* be announced by the screen reader (**NOTE**: a live-region should not be used for this).

### Developer Guide

We do not supply a developer guide for buttons because you should **always use the button tag**!

### ARIA Reference

This section lists all relevant ARIA roles, states and properties for a button.

#### aria-haspopup

Informs AT that the button opens a [menu](https://ebay.gitbook.io/mindpatterns/input/menu) or [dialog](https://ebay.gitbook.io/mindpatterns/disclosure/lightbox-dialog) etc. when clicked.

#### aria-controls

Informs AT that the button controls another element.

#### aria-expanded

Informs AT of the expanded state of any associated element or content

#### aria-label

Creates a label for the button. **Warning!** This label will override any inner text that may be present. This property is most commonly used for icon buttons.

#### aria-describedby

Informs AT of any extended description or context related to the button. Note that this property has no effect on the accessible label of the button.