templates:button
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:audio standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button
ATTRIBUTES
EXAMPLES
templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

<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
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