<templates:button>
AJAX
Data
Forms
Layout
Logic
Navigation
Personalisation
Standard
Templates
ATTRIBUTES
EXAMPLES
Regions
Third Party

<templates:button> </...>

A linkable Button template best used as a call-to-action.

Content

inline-elements
The visible label on the button.

Attributes

confirmMessage
string
The message to be displayed for confirmation on click
height
string
Height

Sets the height of the element. The default units are pixels. include the percentage symbol % to user percentage values.
href
string
Href

Allows the override of the url when clicked.
id
string
(Required) Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
onSuccessRedirect
string
The URL to be redirected to upon the success of the actions of the link.
onSuccessToastMessage
string
The toast message to be displayed upon the success of the actions of the link.
openDialogId
string
When clicked, open a dialog box with this id. The dialog box must be defined on the same page as this link.
openDialogPage
string
When clicked, open a dialog box with this page in its contents.
openDialogPageWidth
string
The width of the dialogbox opened in pixels, when opendialogpage is set.
variant
string
Variant

Name indicating which template variant to use. Template variants change the style and overall look of the template.
width
string
Width

Sets the width of the element. The default units are pixels. include the percentage symbol % to user percentage values.
bgcolor
string
Background color

Background Color of the Button
border
string
Border

Applies a Border to the Button
borderRadius
int
Rounded Corners

Controls how rounded the corners of the Button are
color
string
Font color

Font Color of the Button
padding
int
Padding

Controls how much space there is around the content of the Button
onClickServer
callable
Called when the button is clicked

Examples

Link Button

Basic button display with contact us link

HTML:

<templates:button variant="Classic" bgcolor="#000000" color="#fff" href="/contact-us/">Contact Us</templates:button>

Run Example

Button with Icon

Adding an icon in a button using Float variant

HTML:

<templates:button variant="Float" bgcolor="#32a4cd" color="#151414" borderRadius="0" padding="10" href="/community/profile/"> <standard:icon library="fontawesome" name="lock" size="4" style="width: 18px; height: 18px; margin-right: 15px; color: #ffffff" /> My Account </templates:button>

Run Example

OpenDialogId Example

Opens a dialog box by its id.

HTML:

<forms:dialogbox id="mydialog"> <h1>Dialog Box</h1> </forms:dialogbox> <templates:button variant="Classic" bgcolor="#32a4cd" color="#fff" opendialogid="mydialog">Open Dialog Box</templates:button>

Run Example