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#