Bootstrap - Button group with Label

Question

Is it possible to have a button group, but one of the elements being a label.

Similar how Input Groups work with Input Groups Addon.

I basically want the button to look like a button but not have any effect when hovered over.

Best effort at the moment is using <a> with disabled, but that makes the colour slightly different to the rest of the page.

http://jsfiddle.net/sctqg038/

Answer 1

I have updated the Fiddle. Just add a id to the button you want to use as a label and give the following css pointer-events:none. It won't change the button color.

Updated Fiddle

snippet

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#label-btn {
  pointer-events: none;
}

<div class="btn-group">
    <a href="#" role="button" class="btn btn-success btn-xs" id="label-btn"  aria-disabled="true">T</a>
    <button type="button" class="btn btn-default btn-xs" aria-label="Import" data-toggle="tooltip" title="Import">
        <span class="glyphicon glyphicon-import" aria-hidden="true"></span>
    </button>
</div>