Buttons

Purpose

The Button component is used to display a button during a conversation. The user can click on it and trigger specific actions instantly. It is very useful for audience interaction as it saves the user the time to manually enter text.

Properties

PropertyTypeDescriptionRequiredDefault value
webviewObjectOpen a webview when the button is clickedNo-
paramsStringParameters passed to the webviewNo-
pathStringNo-
childrenStringShow the buttonYes-
payloadString, NumberCall to actionNo-
urlStringThis URL is opened in a mobile browser when the button is clickedNo-
onClickStringSet the actionNo-
targetStringOpens the linked page in a new window (_blank) or same frame (_self) or parent frame (_parent) or full body of the window (_top) or framenameNo_blank
autodisableBooleanDisable a button once the user has clicked on itNofalse
disabledstyleStringVisual appearance of the button once it is disabledNo-

Note: Webview, payload and url are not strictly required. However, if children is set, one of the three properties must be defined as follows:

<Button payload="1">1</Button>
<Button webview={MyWebview}>1</Button>
<Button url='https://botonic.io' target={'blank'|'_self'|'_parent'|'_top'|'framename'}>Botonic</Button>

But never

<Button>Content</Button>

Example

Output
<Text>
Here I display two types of buttons, the first one is a URL button and the
second is a payload button:
<Button url='https://botonic.io'>Visit botonic.io</Button>
<Button payload='carousel'>Show me a carousel</Button>
</Text>
Was this article useful?