загрузочная панель с иконками в заголовке

У меня есть складная панель начальной загрузки, у меня есть 3 значка значков управления в заголовке, которые я хочу использовать для вызова внешних функций, однако нажатие на любую вещь в заголовке панели переключает функцию свертывания.

есть ли способ изолировать значки в конце, чтобы они не вызывали схлопывание панели?

Я использую react.js и react-bootatrap.

var header = (
            <span>

                        {this.props.ticker.name}

                    <ButtonGroup bsSize="xsmall">
                        <OverlayTrigger placement="top" overlay={<Popover id='Delete Stored Ticker'>Save stored ticker <strong>{this.props.ticker.name}</strong> from <strong>{this.props.ticker.area}</strong></Popover>} delayShow={500}>
                            <Button onClick={this._saveTicker}><Glyphicon glyph="floppy-disk"/></Button>
                        </OverlayTrigger>

                        <OverlayTrigger placement="top" overlay={<Popover id='Delete Stored Ticker'>Save ticker as: <strong>{this.props.ticker.name}</strong> from <strong>{this.props.ticker.area}</strong></Popover>} delayShow={500}>
                            <Button><Glyphicon glyph="floppy-save"/></Button>
                        </OverlayTrigger>

                        <OverlayTrigger placement="top" overlay={<Popover id='Delete Stored Ticker'>Delete stored ticker <strong>{this.props.ticker.name}</strong> from <strong>{this.props.ticker.area}</strong></Popover>} delayShow={500}>
                            <Button onClick={this._deleteTicker}><Glyphicon glyph="trash"/></Button>
                        </OverlayTrigger>
                    </ButtonGroup>
            </span>
        );

        return (
            <Panel id={this.props.ticker.id} collapsible header={header} className="storedTickerFiles">
                <ListGroup fill>
                    {items}
                </ListGroup>
            </Panel>
        );