Sure you’re right. Here is my jsfiddle: https://jsfiddle.net/0cquhr4k/

I have made some progress. If I use “q-btn-group flat”, it looks okay as long as you do not hover over the toolbar.

Since the click target isn’t what you would expect, I think it is bad UX and the buttons really should take up all the space. If I use “q-toolbar class=“q-pa-none”” the padding left and right disappears, but the y padding seems to be caused by an inner element that I cannot identify.

I am clueless why my css for hiding the downarrow is not working.

The last problem is that q-badge is positioned to its parent q-btn, but not the q-icon

I have two questions concerning the following code snippet:

      <q-toolbar>
        <q-btn-group spread>
          <q-btn stretch flat icon="mdi-email-open">
            <q-badge floating color="red">7</q-badge>
          </q-btn>
          <q-btn stretch flat icon="mdi-bell" />
          <q-btn-dropdown stretch flat dropdown-icon="null">
            <template v-slot:label>
              <q-icon name="mdi-account" />
              <q-badge floating color="red">2</q-badge>
            </template>
            <q-list>
              <q-item-label header>Dummy</q-item-label>
              <q-item v-for="n in 3" :key="`x.${n}`" clickable v-close-popup tabindex="0">
                <q-item-section avatar>
                  <q-avatar icon="mdi-sunglasses" color="secondary" text-color="white" />
                </q-item-section>
                <q-item-section>
                  <q-item-label>Foo Bar</q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-icon name="info" />
                </q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>
        </q-btn-group>
      </q-toolbar>

1. I would like to show a toolbar with three buttons which should consume the complete toolbar. Therefore I have chosen a buttongroup, but although I used stretch for the buttons and spread for the buttongroup, they consume only the needed space and nothing more

2. I would like to show a badge on a dropdown button and don’t want to show that dropdown arrow. Do I have to write some custom css like .q-btn-dropdown__arrow {display:none} or is there some helper/a more elegant way I can use for that?

I’d be thankful for any hints, especially if you can also tell me where I can look for answers to such problems by myself