Components

ButtonGroup

Group multiple button-like elements together.

Usage

Wrap multiple Button within a ButtonGroup to group them together.

<template>
  <UButtonGroup>
    <UButton color="gray" variant="subtle" label="Button" />
    <UButton
      color="gray"
      variant="outline"
      icon="i-heroicons-chevron-down-20-solid"
    />
  </UButtonGroup>
</template>

Size

Use the size prop to change the size of all the buttons.

size

<template>
  <UButtonGroup size="xl">
    <UButton color="gray" variant="subtle" label="Button" />
    <UButton
      color="gray"
      variant="outline"
      icon="i-heroicons-chevron-down-20-solid"
    />
  </UButtonGroup>
</template>

Orientation

Use the orientation prop to change the orientation of the buttons. Defaults to horizontal.

orientation

<template>
  <UButtonGroup orientation="vertical">
    <UButton color="gray" variant="subtle" label="Submit" />
    <UButton color="gray" variant="outline" label="Cancel" />
  </UButtonGroup>
</template>

Examples

With input

You can use components like Input, InputMenu, Select SelectMenu, etc. within a button group.

<template>
  <UButtonGroup>
    <UInput color="gray" variant="outline" placeholder="Enter token" />

    <UButton
      color="gray"
      variant="subtle"
      icon="i-heroicons-clipboard-document"
    />
  </UButtonGroup>
</template>

You can use a tooltip within a button group.

<template>
  <UButtonGroup>
    <UInput color="gray" variant="outline" placeholder="Enter token" />

    <UTooltip text="Copy to clipboard">
      <UButton
        color="gray"
        variant="subtle"
        icon="i-heroicons-clipboard-document"
      />
    </UTooltip>
  </UButtonGroup>
</template>

You can use a dropdown menu within a button group.

<script setup lang="ts">
const items = [{
  label: 'Team',
  icon: 'i-heroicons-users'
}, {
  label: 'Invite users',
  icon: 'i-heroicons-user-plus',
  children: [{
    label: 'Invite by email',
    icon: 'i-heroicons-paper-airplane'
  }, {
    label: 'Invite by link',
    icon: 'i-heroicons-link'
  }]
}, {
  label: 'New team',
  icon: 'i-heroicons-plus'
}]
</script>

<template>
  <UButtonGroup>
    <UButton color="gray" variant="subtle" label="Settings" />

    <UDropdownMenu :items="items">
      <UButton
        color="gray"
        variant="outline"
        icon="i-heroicons-chevron-down-20-solid"
      />
    </UDropdownMenu>
  </UButtonGroup>
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`size`		`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation the buttons are laid out.

Slots

Slot	Type
`default`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    buttonGroup: {
      base: 'relative',
      variants: {
        size: {
          xs: '',
          sm: '',
          md: '',
          lg: '',
          xl: ''
        },
        orientation: {
          horizontal: 'inline-flex -space-x-px',
          vertical: 'flex flex-col -space-y-px'
        }
      },
      buttonGroupVariant: {
        buttonGroup: {
          horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none',
          vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none'
        }
      },
      buttonGroupVariantWithRoot: {
        buttonGroup: {
          horizontal: {
            root: 'group',
            base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
          },
          vertical: {
            root: 'group',
            base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
          }
        }
      }
    }
  }
})

Button

A button element that can act as a link or trigger an action.

Card

Display content in a card with a header, body and footer.