Qwik button-group - Flowbite

Button groups allow you to stack together multiple buttons in a single line horizontally based on multiple styles and sizes using Qwik and Tailwind CSS

The button group component from Flowbite Qwik can be used to stack multiple button elements and group them visually together. It can often be used to create a navigation menu or a toolbar.

Choose from multiple examples and you can update properties such as the color, size, and appearance using the props from Qwik and utility classes from Tailwind CSS.

To start using the component you need to import it from the flowbite-qwik :

import { Button } from "flowbite-qwik"

Default button group

Use this example of the <ButtonGroup> component by adding the Button component as a child element and stack them together. You can also use the color prop to change the color of the buttons.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Button, ButtonGroup } from 'flowbite-qwik'

export default component$(() => {
  return (
    <ButtonGroup>
      <Button color="light">Profile</Button>
      <Button color="light">Settings</Button>
      <Button color="light">Messages</Button>
    </ButtonGroup>
  )
})

Button group with icons

Import one of the icons from the flowbite-qwik-icons library and add it as a child element to the <Button> component to create multiple buttons with icons grouped together.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Button, ButtonGroup } from 'flowbite-qwik'
import { IconDownloadOutline, IconFileSearchOutline, IconProfileCardOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <ButtonGroup>
      <Button color="light" prefix={IconProfileCardOutline}>
        Profile
      </Button>
      <Button color="light" prefix={IconFileSearchOutline}>
        Settings
      </Button>
      <Button color="light" prefix={IconDownloadOutline}>
        Messages
      </Button>
    </ButtonGroup>
  )
})

Button group as links

You can also use the button group component as links.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Button, ButtonGroup } from 'flowbite-qwik'
import { IconDownloadOutline, IconFileSearchOutline, IconProfileCardOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <ButtonGroup>
      <Button href="#profile" color="light" prefix={IconProfileCardOutline}>
        Profile
      </Button>
      <Button href="#settings" color="light" prefix={IconFileSearchOutline}>
        Settings
      </Button>
      <Button href="#messages" color="light" prefix={IconDownloadOutline}>
        Messages
      </Button>
    </ButtonGroup>
  )
})

Button group Outline

Group a series of buttons together on a single line or stack them in a vertical column.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Button, ButtonGroup } from 'flowbite-qwik'

export default component$(() => {
  return (
    <ButtonGroup outline>
      <Button color="blue">Profile</Button>
      <Button color="blue">Settings</Button>
      <Button color="blue">Messages</Button>
    </ButtonGroup>
  )
})

Outlined with icon

Group a series of buttons together on a single line or stack them in a vertical column.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Button, ButtonGroup } from 'flowbite-qwik'
import { IconDownloadOutline, IconFileSearchOutline, IconProfileCardOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <ButtonGroup outline>
      <Button color="red" prefix={IconProfileCardOutline}>
        Profile
      </Button>
      <Button color="red" prefix={IconFileSearchOutline}>
        Settings
      </Button>
      <Button color="red" prefix={IconDownloadOutline}>
        Messages
      </Button>
    </ButtonGroup>
  )
})

Button group event handler

You can use onClick$ option of the Button component to know which one is clicked

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Button, ButtonGroup } from 'flowbite-qwik'
import { IconDownloadOutline, IconFileSearchOutline, IconProfileCardOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <ButtonGroup>
      <Button onClick$={() => alert('clicked!')} href="#profile" color="light" prefix={IconProfileCardOutline}>
        Profile
      </Button>
      <Button onClick$={() => alert('clicked!')} href="#settings" color="light" prefix={IconFileSearchOutline}>
        Settings
      </Button>
      <Button onClick$={() => alert('clicked!')} href="#messages" color="light" prefix={IconDownloadOutline}>
        Messages
      </Button>
    </ButtonGroup>
  )
})