The `Button` element tool allows you to have a custom button rendered at a given position above the element. It accepts a few additional arguments, which can be passed as an object to the element tool constructor:

x | string | number | Use percentage strings (e.g. `'40%'`) to position the button relatively to the element width/height. A number means distance from the top-left corner of the element. Default is `0`.
y
rotate | boolean | Should the button rotate according to the element angle around the element center? Default is `false`.
offset | object | Additional offset of the button from the position defined by `x` and `y`. Default is `{ x: 0, y: 0 }`.
action | function | What should happen when the user clicks the button? Default is `undefined` (no interaction). The callback function is expected to have the signature `function(evt, elementView, buttonView)` where `evt` is a `jQuery.Event` object. The element view is available inside the function as `this`; the element model is available as `this.model`.
markup | JSONMarkup | The markup of the button, provided in the JointJS JSON format. Default is `undefined` (no content).

Example of a useful custom info button:

    var infoButton = new joint.elementTools.Button({
        focusOpacity: 0.5,
        // top-right corner
        x: '100%',
        y: '0%'',
        offset: { x: -5, y: -5 },
        action: function(evt) {
            alert('View id: ' + this.id + '\n' + 'Model id: ' + this.model.id);
        },
        markup: [{
            tagName: 'circle',
            selector: 'button',
            attributes: {
                'r': 7,
                'fill': '#001DFF',
                'cursor': 'pointer'
            }
        }, {
            tagName: 'path',
            selector: 'icon',
            attributes: {
                'd': 'M -2 4 2 4 M 0 3 0 0 M -2 -1 1 -1 M -1 -4 1 -4',
                'fill': 'none',
                'stroke': '#FFFFFF',
                'stroke-width': 2,
                'pointer-events': 'none'
            }
        }]
    });

The `elementTools.Button` class can also be extended, to create a reusable custom button type. Then, a new instance of the custom button type can be obtained by calling its constructor:

    var InfoButton = joint.elementTools.Button.extend({
        name: 'info-button',
        options: {
            focusOpacity: 0.5,
            distance: 60,
            action: function(evt) {
                alert('View id: ' + this.id + '\n' + 'Model id: ' + this.model.id);
            },
            markup: [{
                tagName: 'circle',
                selector: 'button',
                attributes: {
                    'r': 7,
                    'fill': '#001DFF',
                    'cursor': 'pointer'
                }
            }, {
                tagName: 'path',
                selector: 'icon',
                attributes: {
                    'd': 'M -2 4 2 4 M 0 3 0 0 M -2 -1 1 -1 M -1 -4 1 -4',
                    'fill': 'none',
                    'stroke': '#FFFFFF',
                    'stroke-width': 2,
                    'pointer-events': 'none'
                }
            }]
        }
    });

    var infoButton = new InfoButton();