> For the complete documentation index, see [llms.txt](https://docs.poweredbybackstage.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.poweredbybackstage.com/modules/button.md).

# Button

![Different groups of stylized button modules](https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2FJUy0UmpzHLsIhoHitEMa%2Fbutton%20module.png?alt=media\&token=af2629ff-a76d-4f9d-a130-a4ed52acbcf4)

## Overview

A **Button module** can be used for user driven clicks such as for buttons in forms and as interaction buttons around your site.

## Properties <a href="#properties" id="properties"></a>

**Link Url**\
*String, url*\
Sets the url that can be passed as the behavior on button or link click.\
Example: '*<https://www.example.com>'*

**Button Label**\
*String*\
Sets the label of the button.

[**Button ARIA Label**](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)\
*String*\
Sets a ARIA label of the button to provide the element with an [accessible name](https://w3c.github.io/aria/#dfn-accessible-name).

**Button Color**\
*String - Valid color string (`white`) or hex code (`#FFFFF`)*\
Sets the color of the button background.

[**Text Color**](https://developer.mozilla.org/en-US/docs/Web/CSS/color)\
*String - Valid color string (`white`) or hex code (`#FFFFF`)*\
Overrides the default color of the text.

[**Font Size**](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)\
*String*\
Sets the font size of the button label. Example: `6px` or `1em`

[**Border Color**](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)\
*String - Valid color string (`white`) or hex code (`#FFFFF`)*\
Sets the color of the border.

[**Padding**](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)\
*String*\
Defines the padding around the edge of the button. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `6px` or `1em`

[**Font Family**](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)\
*String - Arial*\
Sets the font for the chat to the specified [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) name or generic family name

[**Border Radius**](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)\
*String*\
If defined, sets the button curve radius. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `5px` or `25%`

[**Border Width**](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width)\
*String*\
Sets the button border width. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `6px` or `1em`

[**Border Style**](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style)\
*String, css property*\
*A*llows for extra customization of a button's [`border-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style). Options include:

* `border-style`
* `hidden`
* `dotted`
* `dashed`
* `solid`
* `double`
* `groove`
* `ridge`
* `inset`
* `outset`

[**Width**](https://developer.mozilla.org/en-US/docs/Web/CSS/width)\
*String*\
Overrides the default width of the button. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `500px` or `5em`

## Nodes <a href="#nodes" id="nodes"></a>

### Broadcasters

**Button:on-click**

Broadcast to the event system when a user button is clicked

### Listeners

**Button:click**

Listener on button click

**Button:animationState**

Button animation

**Parameters:**

* stateName