The Nuxt UI Button Group (<UButtonGroup/>) can do more than join a couple of buttons together. Here are some examples uses that are supported straight out of the box (with a little tweaking of the styles).

Badges

Badges can be combined with buttons to make them actionable. Perfect for data table filters (more on that here).

<UButtonGroup size="xs" :ui="{ rounded: 'rounded-full' }">
    <UBadge label="cancelled" variant="outline" :ui="{size: {xs: 'ps-2'}}"  />
    <UButton icon="i-heroicons-x-mark" variant="solid" class="z-20"/>
</UButtonGroup>

Input actions

Combine an input and button to create leading or trailing action buttons. Note you need to apply a z-index style on the button (if it appears after the input) to ensure the borders display properly.

<UButtonGroup>
    <UInput type="url" placeholder="URL" icon="i-heroicons-link" />
    <UButton icon="i-heroicons-document-duplicate" alt="Copy URL" variant="outline" class="z-20"/>
</UButtonGroup>

This post was inspired by this discussion on GitHub.