IconButton

Version: 9.0

An IconButton control has the same functionality as a regular button, but it displays only an icon (image) and never a text label. You specify an image to use as an icon in the ImageUrl property. You can use the same icons here as when you select an icon for an item in the content tree.

IconButton controls enable you to define the icon as a “sprite” selected from a sprite sheet. The ImageUrl property stores the URL of the sprite sheet, and the BackgroundPosition property stores the coordinates of the desired sprite (icon/image).

Properties

Name

Description

Default

Appearance

BackgroundPosition

Indicates the offset of the sprite/icon/image in a sprite sheet file. The value must have the following 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

Dimensions

Specify the dimensions (in pixels) of the icon. Select between any of the following dimensions:

id16x16id24x24id32x32id48x48

The Dimensions property always indicates the space taken up by the IconButton control on the screen.

If you specify the Dimensions property but do not specify the BackgroundPosition property, the IconButton control resizes the image of the icon to fit the selected Dimensions property.

If you provide a BackgroundPosition property, or if you do not specify the Dimensions or BackgroundPosition properties, the IconButton control crops the image to the dimensions of the button (which by default is 16x16).

id16x16

ImageUrl

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

Events

Click

Specifies the JavaScript that is executed when a user clicks the button.

Configuration

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

The configuration item has these specific fields:

  • ImageUrl

  • Dimensions

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