ButtonGroup

Organize several button-type elements into a group.

Nuxt UI

Git

Demo

Usage

Wrap multiple Button within a ButtonGroup to group them together.

INFO

If you use elements with different colors, use the no-split property to disable the display of the separator.

<script setup lang="ts">
import PromptIcon from '@bitrix24/b24icons-vue/main/PromptIcon'
</script>

<template>
  <B24ButtonGroup>
    <B24Button color="air-primary-copilot" label="Button" />
    <B24Button color="air-primary-copilot" :icon="PromptIcon" />
  </B24ButtonGroup>
  <B24ButtonGroup no-split>
    <B24Button color="air-primary-copilot" label="Button" />
    <B24Button color="air-primary-success" label="Button" />
    <B24Button color="air-primary-alert" label="Button" />
  </B24ButtonGroup>
</template>

Size

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

Details

<script setup lang="ts">
import type { ButtonGroupProps } from '@bitrix24/b24ui-nuxt'
import PromptIcon from '@bitrix24/b24icons-vue/main/PromptIcon'

export interface ExampleProps {
  size?: ButtonGroupProps['size']
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'md' as ButtonGroupProps['size']
})
</script>

<template>
  <B24ButtonGroup
    :size="size"
  >
    <B24Button color="air-primary-copilot" label="Button" />
    <B24Button color="air-primary-copilot" :icon="PromptIcon" />
  </B24ButtonGroup>
  <B24ButtonGroup
    :size="size"
    no-split
  >
    <B24Button color="air-primary-copilot" label="Button" />
    <B24Button color="air-primary-success" label="Button" />
    <B24Button color="air-primary-alert" label="Button" />
  </B24ButtonGroup>
</template>

Orientation

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

Details

<script setup lang="ts">
import type { ButtonGroupProps } from '@bitrix24/b24ui-nuxt'
import PromptIcon from '@bitrix24/b24icons-vue/main/PromptIcon'

export interface ExampleProps {
  orientation?: ButtonGroupProps['orientation']
  size?: ButtonGroupProps['size']
}

withDefaults(defineProps<ExampleProps>(), {
  orientation: 'vertical' as ButtonGroupProps['orientation'],
  size: 'md' as ButtonGroupProps['size']
})
</script>

<template>
  <B24ButtonGroup
    :orientation="orientation"
    :size="size"
  >
    <B24Button color="ai" label="Button" />
    <B24Button color="ai" :icon="PromptIcon" />
  </B24ButtonGroup>
  <B24ButtonGroup
    :orientation="orientation"
    no-split
    :size="size"
  >
    <B24Button color="ai" label="Button" />
    <B24Button color="success" label="Button" />
    <B24Button color="warning" label="Button" />
  </B24ButtonGroup>
</template>

Examples

With input

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

Details

<script setup lang="ts">
import { selectItems, selectItem } from './../../select/dictionary'

function onClick() {
  return new Promise<void>(res => setTimeout(res, 3000))
}
</script>

<template>
  <B24ButtonGroup>
    <B24Input class="w-40" name="search" placeholder="Search..." aria-label="Search" />
    <B24Button
      label="Button"
      loading-auto
      use-clock
      @click="onClick"
    />
  </B24ButtonGroup>
  <B24ButtonGroup no-split>
    <B24Select v-model="selectItem" :items="selectItems" class="w-40" />
    <B24Button
      label="Button"
      color="air-primary"
      loading-auto
      use-clock
      @click="onClick"
    />
  </B24ButtonGroup>
</template>

With tooltip

You can use a Tooltip within a button group.

Details

<script setup lang="ts">
import { ref } from 'vue'
import { useClipboard } from '@vueuse/core'
import CopyPlatesIcon from '@bitrix24/b24icons-vue/actions/CopyPlatesIcon'
import CheckInBoxIcon from '@bitrix24/b24icons-vue/crm/CheckInBoxIcon'

const value = ref('pnpm add @bitrix24/b24ui-nuxt@next')

const { copy, copied } = useClipboard()
</script>

<template>
  <B24ButtonGroup no-split>
    <B24Input v-model="value" class="w-40" />
    <B24Tooltip
      text="Copy to clipboard"
      :content="{ side: 'top' }"
      :delay-duration="0"
    >
      <B24Button
        :color="copied ? 'air-primary-success' : 'air-primary-copilot'"
        :icon="copied ? CheckInBoxIcon : CopyPlatesIcon"
        @click="copy(value)"
      />
    </B24Tooltip>
  </B24ButtonGroup>
</template>

With dropdown

You can use a DropdownMenu within a button group.

Details

<script setup lang="ts">
import { ref } from 'vue'
import { dropdownMenuItems } from './../../dropdownmenu/dictionary'
import MoreMIcon from '@bitrix24/b24icons-vue/outline/MoreMIcon'

const value = ref('pnpm add @bitrix24/b24ui-nuxt@next')
</script>

<template>
  <B24ButtonGroup>
    <B24Input v-model="value" class="w-40" />
    <B24DropdownMenu :items="dropdownMenuItems" :content="{ align: 'end' }">
      <B24Button
        :icon="MoreMIcon"
      />
    </B24DropdownMenu>
  </B24ButtonGroup>
</template>

With badge

You can use a Badge within a button group.

Details

<template>
  <B24ButtonGroup no-split>
    <B24Badge color="air-tertiary" label="https://" />
    <B24Input type="url" placeholder="www.example.com" />
  </B24ButtonGroup>
</template>

API

Props

Prop	Default	Type
as	'div'	any The element or component this component should render as.
size	'md'	"md" | "xs" | "sm" | "lg" | "xl" | "xss"
orientation	"horizontal"	"horizontal" | "vertical" The orientation the buttons are laid out.
noSplit	false	boolean Disable show split
b24ui		{}

Slots

Slot	Type
default	{}