Buttons

Buttons can be used pretty much anywhere. Creating a button starts by creating a <div> with the data-bb-type="button" attribute. By default a button will size itself to the text used for the caption. You can however use the data-bb-style="stretch" setting for a button to make it stretch to the total width of the container where it is embedded.

To add a click handler to the button simply add an "onclick" event to the <div>.

    <div data-bb-type="screen">
        <div data-bb-type="panel-header">Font</div>
            <div data-bb-type="label-control-horizontal-row">
                <div data-bb-type="label">Font Style:</div>
                <div data-bb-type="button" onclick="alert('click');" id="plain">Plain</div>
            </div>
        </div>
    </div>

BlackBerry 10 styled buttons support the ability to add an image by setting the data-bb-img attribute to the path to your image.

    <div data-bb-type="button" data-bb-img="images/foo.png">My Button</div>

A BlackBerry 10 styled button can be styled in one of the following ways:

• Text Only: (Text is centered)
• Image + Text: (Image & Text are left justified)
• Image Only: (Image is centered and button is shrunk to fit image)

BlackBerry 10 Button Image Sizes

• BlackBerry PlayBook - 29 x 29 pixels
• BlackBerry 10 - 71 x 71 pixels

JavaScript Interface

You can disable in your Button by adding the data-bb-disabled="true" attribute. When you want to dynamically change the state of your button you can call it's enable() and disable() functions.

	document.getElementById('plainBtn').enable();
	document.getElementById('plainBtn').disable();

The setCaption(value) function has been added to buttons to allow you to set their caption for all OS versions

    document.getElementById('plainBtn').setCaption('my caption');

The setImage(value) function has been added to buttons to allow you to set their image. This is only supported on BlackBerry 10 styling

    document.getElementById('plainBtn').setImage('images/foo.png');