#

Jump to Table of Contents

# Example: Basic button widgets

In this example, we'll look at a few ways to create button widgets using the `'button'` module and listen for events on one to manipulate an attribute of another.

can toggle the `pressed` attribute of

#### Source: HTML

Note: be sure to add the `yui3-skin-sam` classname to the page's `<body>` element or to a parent element of the widget in order to apply the default CSS skin. See Understanding Skinning.

    <body class="yui3-skin-sam"> <!-- You need this skin class -->

    <button id="myPushButton">This push button</button>
    <p>can toggle the `pressed` attribute of</p>
    <button id="myToggleButton">this depressed button :(</button>

    <style>
    .example {
        text-align:center;
    }
    .example .yui3-button{
        width: 200px;
    }
    </style>

#### Source: JavaScript

    YUI().use('button', function(Y){

        // A toggle button with a state change listener
        var toggleButton = new Y.ToggleButton({
            srcNode:'#myToggleButton',

            // 'after', because 'on' would trigger before the attribute update
            after: {
                'pressedChange': function () {
                    var button = this,
                        pressed = button.get('pressed'),
                        newLabel = 'this ' + (pressed ? 'pressed ' : 'depressed') + ' button :' + (pressed ? ')' : '(');

                    button.set('label', newLabel);
                }
            }
        }).render();

        var button = new Y.Button({
            srcNode:'#myPushButton',
            on: {
                'click': function(){
                    var pressed = toggleButton.get('pressed');
                    toggleButton.set('pressed', !pressed);
                }
            }
        }).render();

    });