Qwik button - Flowbite

Enable user interaction with the button component to perform actions on your website as links, for payment, form submission, social buttons and more based on Qwik and Tailwind CSS

The button component is a common UI component found on the web that allows users to trigger certain actions on your website such as submitting a form, navigating to a new page, or downloading a file.

The examples from the Flowbite Qwik library allows you to customise the buttons with different colors, sizes, icons, and more. All examples are built with Qwik and Tailwind CSS.

In order to start using the button component you need to import it from flowbite-qwik :

import { Button } from "flowbite-qwik"

Default button#

Use these default button styles with multiple colors to indicate an action or link within your website.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2">
      <Button>Default</Button>
      <Button color="alternative">Alternative</Button>
      <Button color="dark">Dark</Button>
      <Button color="light">Light</Button>
      <Button color="green">Green</Button>
      <Button color="red">Red</Button>
      <Button color="yellow">Yellow</Button>
      <Button color="purple">Purple</Button>
      <Button color="pink">Pink</Button>
    </div>
  )
})

Button sizes#

Use these examples if you want to use smaller or larger buttons.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap items-center gap-2">
      <Button size="xs">Extra Small - xs</Button>
      <Button size="sm">Small - sm</Button>
      <Button size="md">Medium - md</Button>
      <Button size="lg">Large - lg</Button>
      <Button size="xl">Extra Large - xl</Button>
    </div>
  )
})

Button pills#

The button pills can be used as an alternative style by using fully rounded edges.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2">
      <Button color="default" pill>
        Default
      </Button>
      <Button color="alternative" pill>
        Alternative
      </Button>
      <Button color="dark" pill>
        Dark
      </Button>
      <Button color="light" pill>
        Light
      </Button>
      <Button color="green" pill>
        Green
      </Button>
      <Button color="red" pill>
        Red
      </Button>
      <Button color="yellow" pill>
        Yellow
      </Button>
      <Button color="purple" pill>
        Purple
      </Button>
    </div>
  )
})

Button gradient monochrome#

These beautifully colored buttons built with the gradient color stops utility classes from Tailwind CSS can be used as a creative alternative to the default button styles.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2">
      <Button gradient="blue">Blue</Button>
      <Button gradient="cyan">Cyan</Button>
      <Button gradient="green">Green</Button>
      <Button gradient="lime">Lime</Button>
      <Button gradient="pink">Pink</Button>
      <Button gradient="purple">Purple</Button>
      <Button gradient="red">Red</Button>
      <Button gradient="teal">Teal</Button>
    </div>
  )
})

Button gradient duotone#

These buttons use a style that includes two contrasted colors creating an impressive mesh gradient effect.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2">
      <Button gradient="purple-blue">Purple to blue</Button>
      <Button gradient="cyan-blue">Cyan to blue</Button>
      <Button gradient="green-blue">Green to blue</Button>
      <Button gradient="purple-pink">Purple to pink</Button>
      <Button gradient="pink-orange">Pink to orange</Button>
      <Button gradient="teal-lime">Teal to lime</Button>
      <Button gradient="red-yellow">Red to yellow</Button>
    </div>
  )
})

Button outline#

This incorporates an outline border

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2">
      <Button color="default" outline>
        Default
      </Button>
      <Button color="dark" outline>
        Dark
      </Button>
      <Button color="green" outline>
        Green
      </Button>
      <Button color="red" outline>
        Red
      </Button>
      <Button color="yellow" outline>
        Yellow
      </Button>
      <Button color="purple" outline>
        Purple
      </Button>
    </div>
  )
})

Button outline gradient#

This is a special button style that incorporates a gradient color for the outline that can be used as a secondary style to the fully colored gradient buttons.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2">
      <Button gradient="purple-blue" outline>
        Purple to blue
      </Button>
      <Button gradient="cyan-blue" outline>
        Cyan to blue
      </Button>
      <Button gradient="green-blue" outline>
        Green to blue
      </Button>
      <Button gradient="purple-pink" outline>
        Purple to pink
      </Button>
      <Button gradient="pink-orange" outline>
        Pink to orange
      </Button>
      <Button gradient="teal-lime" outline>
        Teal to lime
      </Button>
      <Button gradient="red-yellow" outline>
        Red to yellow
      </Button>
    </div>
  )
})

Button colored shadows#

These beautiful button elements with color shadows can be used since the release of Tailwind v3.0.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2">
      <Button gradient="blue" shadow>
        Blue with blue
      </Button>
      <Button gradient="cyan" shadow>
        Cyan with cyan
      </Button>
      <Button gradient="green" shadow>
        Green with green
      </Button>
      <Button gradient="lime" shadow>
        Lime with lime
      </Button>
      <Button gradient="pink" shadow>
        Pink with pink
      </Button>
      <Button gradient="purple" shadow>
        Purple with purple
      </Button>
      <Button gradient="red" shadow>
        Red with red
      </Button>
      <Button gradient="teal" shadow>
        Teal with teal
      </Button>
      <Button gradient="blue" shadow="red">
        Blue with red
      </Button>
      <Button gradient="cyan" shadow="teal">
        Cyan with teal
      </Button>
      <Button gradient="teal" shadow="purple">
        Teal with purple
      </Button>
    </div>
  )
})

Button square#

Sometimes you need a button to indicate an action using only an icon.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button } from 'flowbite-qwik'
import { IconArrowLeftOutline, IconArrowRightOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2">
      <Button gradient="red-yellow" square>
        <IconArrowRightOutline class="h-5 w-5" />
      </Button>
      <Button color="default" pill square>
        <IconArrowRightOutline class="h-5 w-5" />
      </Button>
      <Button color="dark" outline square>
        <IconArrowLeftOutline class="h-5 w-5" />
      </Button>
      <Button color="yellow" outline pill square>
        <IconArrowLeftOutline class="h-5 w-5" />
      </Button>
    </div>
  )
})

Button loading#

Use the Spinner components to indicate a loader animation inside buttons:

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button, useToggle } from 'flowbite-qwik'
import { IconArrowLeftOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  const { value: loading, toggle$ } = useToggle()

  return (
    <div class="flex flex-wrap items-center gap-2">
      <Button disabled={loading.value} loading={loading.value} gradient="purple-blue" outline size="xs" onClick$={toggle$}>
        Click me
      </Button>
      <Button loading={loading.value} gradient="red-yellow" size="sm" onClick$={toggle$}>
        Click me
      </Button>
      <Button loading={loading.value} color="default" loadingPosition="suffix" outline onClick$={toggle$} suffix={IconArrowLeftOutline}>
        Click me
      </Button>
      <Button loading={loading.value} gradient="green-blue" size="lg" onClick$={toggle$}>
        Click me
      </Button>
      <Button loading={loading.value} gradient="pink" size="xl" onClick$={toggle$}>
        Click me
      </Button>
    </div>
  )
})

Button disabled#

Use the following styles to indicate a disabled button. This can be often used inside form elements to disable the submit button before all the form elements have been completed and validated.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2">
      <Button color="default" disabled>
        Default
      </Button>
      <Button color="default" outline disabled>
        Default outline
      </Button>
      <Button gradient="red" disabled>
        Red gradient
      </Button>
      <Button gradient="red-yellow" disabled>
        Red to yellow gradient
      </Button>
      <Button gradient="red-yellow" outline disabled>
        Red to yellow outline
      </Button>
    </div>
  )
})

Button as link#

You can add a link to a Button component.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Link, StaticGenerateHandler } from '@builder.io/qwik-city'
import { Button } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2">
      <Button href="https://google.com" target="_blank">
        Google.com
      </Button>
      <Button href="/examples/blue-ltr/button/11-button-disabled">Quickstart</Button>
      <Button href="/examples/blue-ltr/button/13-button-full" tag={Link}>
        Internal link
      </Button>
    </div>
  )
})

Button full option#

Display a button taking the full width of its container

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button } from 'flowbite-qwik'
import { IconHomeOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <div class="flex flex-wrap items-center gap-2">
      <Button prefix={IconHomeOutline} full>
        Buy
      </Button>
    </div>
  )
})

Button slot default#

Add content inside the button as default

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button } from 'flowbite-qwik'
import { IconArrowRightOutline, IconArrowRightSolid } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <div class="flex flex-wrap items-center gap-2">
      <Button gradient="purple-blue" square>
        <IconArrowRightSolid class="h-5 w-5" />
      </Button>
      <Button color="default" pill square>
        <IconArrowRightSolid class="h-5 w-5" />
      </Button>
      <Button gradient="green-blue" square>
        Close something
      </Button>
      <Button color="default" outline pill square suffix={IconArrowRightOutline}>
        Open something
      </Button>
    </div>
  )
})

Button slot prefix#

Add prefix content inside the button

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button } from 'flowbite-qwik'
import { IconHomeOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <div class="flex flex-wrap items-center gap-2">
      <Button prefix={IconHomeOutline}>Buy</Button>
    </div>
  )
})

Button slot suffix#

Add suffix content inside the button

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button } from 'flowbite-qwik'
import { IconArrowRightOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <div class="flex flex-wrap items-center gap-2">
      <Button suffix={IconArrowRightOutline}>Choose plan</Button>
    </div>
  )
})

Button with custom tag#

You can use a custom tag for the Button component.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap items-center gap-2">
      <Button tag="div">I'am a div</Button>
      <Button tag="span">I'am a span</Button>
    </div>
  )
})