<templates:button>
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater 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: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
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