GWT create custom button with ui binder

I want to create a special button, that will have Image, text, label and another image.

I have the following code:

    public class CrossingStateMenuItemButton extends Composite implements HasText, HasClickHandlers,
    ClickHandler {
  @UiField
  FocusPanel pane;
  @UiField
  Label label;
  @UiField
  Label state;
  @UiField
  Image error;
  @UiField
  Image acoustic;

  private CrossingObject crossingObject;

  interface CrossingStateMenuItemButtonBinder extends UiBinder<Widget, CrossingStateMenuItemButton> {
  }

  private static CrossingStateMenuItemButtonBinder binder = GWT
      .create(CrossingStateMenuItemButtonBinder.class);

  public CrossingStateMenuItemButton(CrossingObject crossingObject) {
    this.crossingObject = crossingObject;
    pane.addClickHandler(this);
    initWidget(binder.createAndBindUi(this));
  }

  public CrossingObject getCrossingObject() {
    return crossingObject;
  }

  public void setCrossingObject(CrossingObject crossingObject) {
    this.crossingObject = crossingObject;
  }

  @Override
  public void onClick(ClickEvent event) {
    this.fireEvent(event);
  }

  @Override
  public HandlerRegistration addClickHandler(ClickHandler handler) {
    return addHandler(handler, ClickEvent.getType());
  }

  @Override
  public String getText() {
    return label.getText();
  }

  @Override
  public void setText(String text) {
    this.label.setText(text);
  }

  public void setState(LabelType state) {
    this.state.setType(state);
  }

  public void setAcoustic(boolean enabled) {
    this.acoustic.setVisible(enabled);
  }
}

I have corresponding ui binder template:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:b="urn:import:org.gwtbootstrap3.client.ui" xmlns:g="urn:import:org.gwtbootstrap3.client.ui.gwt"
    xmlns:h="urn:import:org.gwtbootstrap3.client.ui.html" xmlns:gwt="urn:import:com.google.gwt.user.client.ui">

    <ui:with field='res'
        type='com.company.applicationname.client.resources.AppResources' />

    <gwt:FocusPanel ui:field="pane"
        addStyleNames="{res.style.crossingStateMenuItem}">
        <b:Image ui:field="error"
            styleName="{res.style.crossingStateMenuItemErrorImage}"></b:Image>
        <b:Label ui:field="label" styleName="{res.style.crossingStateMenuItemLabel}"></b:Label>
        <b:Label ui:field="state" type="DEFAULT"
            styleName="{res.style.crossingStateMenuItemStateLabel}">off</b:Label>
        <b:Image ui:field="acoustic"
            styleName="{res.style.crossingStateMenuItemAcousticImage}"></b:Image>
    </gwt:FocusPanel>

</ui:UiBinder>

But when I try to compile it, I get:

Type mismatch: cannot convert from FocusPanel to Widget

I am stuck on this for a while now and have no idea where is the problem, I tried different panels (SimplePanel, HTMLPanel..) w/o any luck. How to make it work?

It was a stupid mistake, since I was importing Widget from "org.gwtbootstrap3.client.ui.gwt.Widget" instead of "com.google.gwt.user.client.ui.Widget".