Button

Version: 9.0

A Button control presents a standard button that users can click. If you set the ButtonType property to primary, SPEAK makes it stand out visually. You can set the size of a button to normal or large with the Dimensions property.

Buttons that users click to carry out the main purpose of a page should be primary and the others default. You can also set the ButtonType to inverse. An inverse button uses the same colors as a default button, but the text and background colors are swapped.

Buttons can display icons as well as text, and they can show both at the same time.

You specify icons using the ImageUrl property. You can use the same icons as the ones that you specify for items in the content tree. Button controls also support defining the icon as a sprite selected from a sprite sheet. In this case, the ImageUrl property stores the URL of the sprite sheet, and the BackgroundPosition property stores the coordinates of the desired sprite (icon/image).

If you use both icon and text, SPEAK positions the icon to the left of the text. You cannot change this position.

Properties

Name

Description

Default

Appearance

BackgroundPosition

Specify the offset of the sprite/icon/image in a sprite sheet file in this format:

-<x>px -<y>px

Where <x> indicates the horizontal number of pixels from the left edge of the sprite sheet to the left edge of the sprite (represented as a negative number), and <y> indicates the vertical number of pixels from the top edge of the sprite sheet (represented as a negative number) to the top edge of the sprite.

-0px -0px

ButtonType

Choose between Default, Primary, and Inverse.

Default

Dimension

Specify the size of the button. You can choose between Normal and Large.

Normal

ImageUrl

Specify the Sitecore path of an icon (for example, Network/16x16/home.png for the icon shown for the /sitecore/content/home item) or sprite sheet. SPEAK provides a number of sprite sheets in the \sitecore\shell\client\Speak\Assets\img folder (found in the website folder).

Text

Specify the text that you want displayed on the button. You can enter a static text, set the text from PageCode, or you can bind it to a property of another control.

Events

Click

Specify JavaScript that SPEAK executes when a user clicks the button.

Configuration

You can create a configuration item for a Button control by creating an item based on the Button Parameters template.

The configuration item has these specific fields:

  • ButtonType

  • Dimension

  • Text – this field corresponds to the Text property, and you use the field to make it easier to translate UI texts

  • ImageUrl

  • BackgroundPosition

It inherits these fields:

  • Click

  • IsEnabled

  • IsVisible

  • AccessKey

  • Tooltip

  • Behaviors

  • Id

Do you have some feedback for us?

If you have suggestions for improving this article,