Button

Different groups of stylized button modules

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

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 String Sets a ARIA label of the button to provide the element with an accessible name.

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

Text Color String - Valid color string (white) or hex code (#FFFFF) Overrides the default color of the text.

Font Size String Sets the font size of the button label. Example: 6px or 1em

Border Color String - Valid color string (white) or hex code (#FFFFF) Sets the color of the border.

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 String - Arial Sets the font for the chat to the specified font-family name or generic family name

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 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 String, css property Allows for extra customization of a button's border-style. Options include:

  • border-style

  • hidden

  • dotted

  • dashed

  • solid

  • double

  • groove

  • ridge

  • inset

  • outset

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

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

Last updated

Was this helpful?