React Buttons - 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 React 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 React library allows you to customise the buttons with different colors, sizes, icons, and more. All examples are built with React and Tailwind CSS.

In order to start using the button component you need to import it from Flowbite React:

'use client';

import { Button } from 'flowbite';

Default buttons

Use this example to create a default button by using the <Button> component from React and by adding the color property you can change the color of the button.

<Button>
  Default
</Button>
<Button color="gray">
  Gray
</Button>
<Button color="dark">
  Dark
</Button>
<Button color="light">
  Light
</Button>
<Button color="success">
  Success
</Button>
<Button color="failure">
  Failure
</Button>
<Button color="warning">
  Warning
</Button>
<Button color="purple">
  Purple
</Button>

Button pills

Add the pill property to the <Button> component to create a button with rounded corners.

<Button
  color="gray"
  pill
>
  <p>
    Gray
  </p>
</Button>
<Button
  color="dark"
  pill
>
  <p>
    Dark
  </p>
</Button>
<Button
  color="light"
  pill
>
  <p>
    Light
  </p>
</Button>
<Button
  color="success"
  pill
>
  <p>
    Success
  </p>
</Button>
<Button
  color="failure"
  pill
>
  <p>
    Failure
  </p>
</Button>
<Button
  color="warning"
  pill
>
  <p>
    Warning
  </p>
</Button>
<Button
  color="purple"
  pill
>
  <p>
    Purple
  </p>
</Button>

Gradient monochrome

By adding the gradientMonochrome property to the <Button> component you can create a button with a gradient background.

<Button gradientMonochrome="info">
  Info
</Button>
<Button gradientMonochrome="success">
  Success
</Button>
<Button gradientMonochrome="cyan">
  Cyan
</Button>
<Button gradientMonochrome="teal">
  Teal
</Button>
<Button gradientMonochrome="lime">
  Lime
</Button>
<Button gradientMonochrome="failure">
  Failure
</Button>
<Button gradientMonochrome="pink">
  Pink
</Button>
<Button gradientMonochrome="purple">
  Purple
</Button>

Gradient duotone

Use the gradientDuoTone property to create a button with a gradient background with two colors.

<Button gradientDuoTone="purpleToBlue">
  Purple to Blue
</Button>
<Button gradientDuoTone="cyanToBlue">
  Cyan to Blue
</Button>
<Button gradientDuoTone="greenToBlue">
  Green to Blue
</Button>
<Button gradientDuoTone="purpleToPink">
  Purple to Pink
</Button>
<Button gradientDuoTone="pinkToOrange">
  Pink to Orange
</Button>
<Button gradientDuoTone="tealToLime">
  Teal to Lime
</Button>
<Button gradientDuoTone="redToYellow">
  Red to Yellow
</Button>

Outline buttons

Use the outline property to create an outline button with transparent background and colored border.

<Button
  gradientDuoTone="purpleToBlue"
  outline
>
  <p>
    Purple to Blue
  </p>
</Button>
<Button
  gradientDuoTone="cyanToBlue"
  outline
>
  <p>
    Cyan to Blue
  </p>
</Button>
<Button
  gradientDuoTone="greenToBlue"
  outline
>
  <p>
    Green to Blue
  </p>
</Button>
<Button
  gradientDuoTone="purpleToPink"
  outline
>
  <p>
    Purple to Pink
  </p>
</Button>
<Button
  gradientDuoTone="pinkToOrange"
  outline
>
  <p>
    Pink to Orange
  </p>
</Button>
<Button
  gradientDuoTone="tealToLime"
  outline
>
  <p>
    Teal to Lime
  </p>
</Button>
<Button
  gradientDuoTone="redToYellow"
  outline
>
  <p>
    Red to Yellow
  </p>
</Button>

Button sizes

You can update the size of the button by adding the size property to the <Button> component.

Choose from xs, sm, md, lg, and xl as the value.

<Button size="xs">
  Extra small
</Button>
<Button size="sm">
  Small
</Button>
<Button size="md">
  Base
</Button>
<Button size="lg">
  Large
</Button>
<Button size="xl">
  Extra large
</Button>

Buttons with icon

You can add icons to the buttons by adding it inside the <Button> component near the text.

<Button>
  <HiShoppingCart className="mr-2 h-5 w-5" />
  <p>
    Buy now
  </p>
</Button>
<Button>
  <p>
    Choose plan
  </p>
  <HiOutlineArrowRight className="ml-2 h-5 w-5" />
</Button>

Button with label

You can add a label to the button by adding the label property to the <Button> component.

<Button label="2">
  Messages
</Button>

Button with only icons

Create a button with only icons by adding the iconOnly property to the <Button> component. These are useful when you want to show buttons in a small space and for things like pagination.

<Button>
  <HiOutlineArrowRight className="h-6 w-6" />
</Button>
<Button pill>
  <HiOutlineArrowRight className="h-6 w-6" />
</Button>
<Button outline>
  <HiOutlineArrowRight className="h-6 w-6" />
</Button>
<Button
  outline
  pill
>
  <HiOutlineArrowRight className="h-6 w-6" />
</Button>

Button with loading state

Add a loading state to the button element by adding the isProcessing property to the <Button> component.

<div className="flex flex-wrap items-center gap-2">
  <div>
    <Button isProcessing>
      Click me!
    </Button>
  </div>
  <div>
    <Button
      isProcessing
      outline
    >
      <p>
        Click me!
      </p>
    </Button>
  </div>
</div>

Disabled buttons

You can disable the button by adding the disabled property to the <Button> component.

<Button disabled>
  Disabled button
</Button>

References

Flowbite Buttons