Is there an equivalent to input-group-text for button groups?

[webJose]

Allow me to show you this image:

The first group is a button group with with an input-group-text:

<div class="input-group-text">
    <span title="Row Count:"><i class="bi bi-person-lines-fill"></i></span>
</div>

The problem: It has the right-hand border rounded. For ease of comparison, the group to the right in the image is an input-group that shows as expected.

Ok, so let's try to label using a disabled button. That solves the border issue, but then 2 things change:

From the image, the first thing that changed is that there is no background color. The disabled button is merely outlined. The second, not obvious from the image, is that the title property has no effect on a disabled button: There is a tooltip that should show and doesn't.

So my question is: Can I get a button group labeled like I labeled the input group shown to the right of the button group?

[julien-deramond]

Hi @webJose

Does something like that correspond to what you're trying to achieve? https://codepen.io/julien-deramond/pen/yLWOQPB

The first example uses toggle buttons (real buttons):

<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-primary rounded-0">Left</button>
    <button type="button" class="btn btn-outline-primary">Middle</button>
    <button type="button" class="btn btn-outline-primary rounded-0">Right</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
</div>

The second one uses radio buttons:

<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
    <label class="btn btn-outline-primary rounded-0" for="btnradio1">Radio 1</label>

    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

    <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
  </div>
</div>

The idea was to keep the <span> to handle the first element (with or without icon), and for the rest, stick with the documentation but by adding .rounded-0 class to the first "button" of the list.

Please note that it's a rendering solution only. If it works in terms of design/rendering, please verify the accessibility too, I haven't checked it particularly.

[webJose]

Thank you for the time taken to look into this. Indeed, I did not consider an approach like this. The curses of being a back-end dev, I suppose. Your proposal is most definitely acceptable. My regards to you.