ButtonGroup

Organize several button-type elements into a group.

Nuxt UI

Git

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="ai" label="Button" />
    <B24Button color="ai" :icon="PromptIcon" />
  </B24ButtonGroup>
  <B24ButtonGroup no-split>
    <B24Button color="ai" label="Button" />
    <B24Button color="success" label="Button" />
    <B24Button color="warning" 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 const
})
</script>

<template>
  <B24ButtonGroup
    :size="size"
  >
    <B24Button color="ai" label="Button" />
    <B24Button color="ai" :icon="PromptIcon" />
  </B24ButtonGroup>
  <B24ButtonGroup
    :size="size"
    no-split
  >
    <B24Button color="ai" label="Button" />
    <B24Button color="success" label="Button" />
    <B24Button color="warning" 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']
}

withDefaults(defineProps<ExampleProps>(), {
  orientation: 'vertical' as const
})
</script>

<template>
  <B24ButtonGroup
    :orientation="orientation"
  >
    <B24Button color="ai" label="Button" />
    <B24Button color="ai" :icon="PromptIcon" />
  </B24ButtonGroup>
  <B24ButtonGroup
    :orientation="orientation"
    no-split
  >
    <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, Select etc. within a button group.

Details

<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['CRM settings', 'My company details', 'Access permissions'])
const value = ref('Access permissions')

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

<template>
  <div class="w-full">
    <B24ButtonGroup
      no-split
    >
      <B24Input class="w-40" name="search" placeholder="Search&hellip;" aria-label="Search" type="search" />
      <B24Button
        label="Button"
        color="link"
        depth="dark"
        loading-auto
        use-clock
        @click="onClick"
      />
    </B24ButtonGroup>
  </div>
  <div class="w-full">
    <B24ButtonGroup
      class="w-2/3"
      no-split
    >
      <B24Select v-model="value" :items="items" class="w-40" />
      <B24Button
        label="Button"
        color="link"
        depth="dark"
        loading-auto
        use-clock
        @click="onClick"
      />
    </B24ButtonGroup>
  </div>
</template>

With tooltip

You can use a Tooltip within a button group.

Details

<script setup lang="ts">
import { ref } from 'vue'
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 copied = ref(false)

function copy() {
  navigator.clipboard.writeText(value.value)
  copied.value = true

  setTimeout(() => {
    copied.value = false
  }, 2000)
}
</script>

<template>
  <B24ButtonGroup
    no-split
  >
    <B24Input v-model="value" />
    <B24Tooltip
      text="Copy to clipboard"
      :content="{ side: 'left' }"
      :delay-duration="0"
    >
      <B24Button
        :color="copied ? 'success' : 'link'"
        :icon="copied ? CheckInBoxIcon : CopyPlatesIcon"
        depth="dark"
        @click="copy"
      />
    </B24Tooltip>
  </B24ButtonGroup>
</template>

With badge

You can use a Badge within a button group.

Details

<template>
  <B24ButtonGroup no-split>
    <B24Badge color="default" use-fill 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		"lg" | "md" | "xs" | "sm"
orientation	"horizontal"	"vertical" | "horizontal" The orientation the buttons are laid out.
noSplit	false	boolean Disable split

Slots

Slot	Type
default	{}