React Buttons - Flowbite

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-react';

Table of Contents#

• Default buttons
• Button pills
• Gradient monochrome
• Gradient duotone
• Outline buttons
• Button sizes
• Buttons with icon
• Button with label
• Button with only icons
• Button with loading state
• Disabled buttons
• Override Button base component
• Theme
• References

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.

'use client';

import { Button } from 'flowbite-react';

export default function DefaultButtons() {
  return (
    <>
      <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.

'use client';

import { Button } from 'flowbite-react';

export default function ButtonPills() {
  return (
    <>
      <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.

'use client';

import { Button } from 'flowbite-react';

export default function GradientMonochrome() {
  return (
    <>
      <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.

'use client';

import { Button } from 'flowbite-react';

export default function GradientDuoTone() {
  return (
    <>
      <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.

'use client';

import { Button } from 'flowbite-react';

export default function Outline() {
  return (
    <>
      <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.

'use client';

import { Button } from 'flowbite-react';

export default function ButtonSizes() {
  return (
    <>
      <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.

'use client';

import { Button } from 'flowbite-react';
import { HiOutlineArrowRight, HiShoppingCart } from 'react-icons/hi';

export default function ButtonsWithIcon() {
  return (
    <>
      <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.

'use client';

import { Button } from 'flowbite-react';

export default function ButtonWithLabel() {
  return (
    <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.

'use client';

import { Button } from 'flowbite-react';
import { HiOutlineArrowRight } from 'react-icons/hi';

export default function IconButtons() {
  return (
    <>
      <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.

'use client';

import { Button } from 'flowbite-react';

export default function Loader() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button
        isProcessing
        size="xs"
      >
        <p>
          Click me!
        </p>
      </Button>
      <Button
        gradientDuoTone="purpleToBlue"
        isProcessing
        size="sm"
      >
        <p>
          Click me!
        </p>
      </Button>
      <Button
        color="red"
        isProcessing
        size="md"
      >
        <p>
          Click me!
        </p>
      </Button>
      <Button
        isProcessing
        pill
        size="lg"
      >
        <p>
          Click me!
        </p>
      </Button>
      <Button
        isProcessing
        outline
        size="xl"
      >
        <p>
          Click me!
        </p>
      </Button>
    </div>
  )
}

You can also customize the spinner icon by passing a React node to the processingSpinner prop.

'use client';

import { Button } from 'flowbite-react';
import { AiOutlineLoading } from 'react-icons/ai';

export default function Loader() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button
        isProcessing
        processingSpinner={<AiOutlineLoading className="h-6 w-6 animate-spin" />}
        size="md"
      >
        <p>
          Click me!
        </p>
      </Button>
    </div>
  )
}

Disabled buttons#

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

'use client';

import { Button } from 'flowbite-react';

export default function Disabled() {
  return (
    <Button disabled>
      Disabled button
    </Button>
  )
}

Override Button base component#

The as prop provides you the ability to transform the <Button /> component into another component or HTML element. This prop accepts a string representing an HTML tag or a functional React component.

'use client';

import { Button } from 'flowbite-react';
import Link from 'next/link';

export default function ButtonAsOtherElements() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <div>
        <Button as="span" className="cursor-pointer">Span Button</Button>
      </div>
      <div>
        <Button as={Link} href="/">
          Next Link Button
        </Button>
      </div>
    </div>
  )
}

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "base": "group flex h-min items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-none",
  "fullSized": "w-full",
  "color": {
    "dark": "text-white bg-gray-800 border border-transparent enabled:hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 dark:bg-gray-800 dark:enabled:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700",
    "failure": "text-white bg-red-700 border border-transparent enabled:hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:enabled:hover:bg-red-700 dark:focus:ring-red-900",
    "gray": "text-gray-900 bg-white border border-gray-200 enabled:hover:bg-gray-100 enabled:hover:text-cyan-700 :ring-cyan-700 focus:text-cyan-700 dark:bg-transparent dark:text-gray-400 dark:border-gray-600 dark:enabled:hover:text-white dark:enabled:hover:bg-gray-700 focus:ring-2",
    "info": "text-white bg-cyan-700 border border-transparent enabled:hover:bg-cyan-800 focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:enabled:hover:bg-cyan-700 dark:focus:ring-cyan-800",
    "light": "text-gray-900 bg-white border border-gray-300 enabled:hover:bg-gray-100 focus:ring-4 focus:ring-cyan-300 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:enabled:hover:bg-gray-700 dark:enabled:hover:border-gray-700 dark:focus:ring-gray-700",
    "purple": "text-white bg-purple-700 border border-transparent enabled:hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:enabled:hover:bg-purple-700 dark:focus:ring-purple-900",
    "success": "text-white bg-green-700 border border-transparent enabled:hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:enabled:hover:bg-green-700 dark:focus:ring-green-800",
    "warning": "text-white bg-yellow-400 border border-transparent enabled:hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-900",
    "blue": "text-cyan-900 bg-white border border-cyan-300 enabled:hover:bg-cyan-100 focus:ring-4 focus:ring-cyan-300 :bg-cyan-600 dark:text-white dark:border-cyan-600 dark:enabled:hover:bg-cyan-700 dark:enabled:hover:border-cyan-700 dark:focus:ring-cyan-700",
    "cyan": "text-cyan-900 bg-white border border-cyan-300 enabled:hover:bg-cyan-100 focus:ring-4 focus:ring-cyan-300 :bg-cyan-600 dark:text-white dark:border-cyan-600 dark:enabled:hover:bg-cyan-700 dark:enabled:hover:border-cyan-700 dark:focus:ring-cyan-700",
    "green": "text-green-900 bg-white border border-green-300 enabled:hover:bg-green-100 focus:ring-4 focus:ring-green-300 :bg-green-600 dark:text-white dark:border-green-600 dark:enabled:hover:bg-green-700 dark:enabled:hover:border-green-700 dark:focus:ring-green-700",
    "indigo": "text-indigo-900 bg-white border border-indigo-300 enabled:hover:bg-indigo-100 focus:ring-4 focus:ring-indigo-300 :bg-indigo-600 dark:text-white dark:border-indigo-600 dark:enabled:hover:bg-indigo-700 dark:enabled:hover:border-indigo-700 dark:focus:ring-indigo-700",
    "lime": "text-lime-900 bg-white border border-lime-300 enabled:hover:bg-lime-100 focus:ring-4 focus:ring-lime-300 :bg-lime-600 dark:text-white dark:border-lime-600 dark:enabled:hover:bg-lime-700 dark:enabled:hover:border-lime-700 dark:focus:ring-lime-700",
    "pink": "text-pink-900 bg-white border border-pink-300 enabled:hover:bg-pink-100 focus:ring-4 focus:ring-pink-300 :bg-pink-600 dark:text-white dark:border-pink-600 dark:enabled:hover:bg-pink-700 dark:enabled:hover:border-pink-700 dark:focus:ring-pink-700",
    "red": "text-red-900 bg-white border border-red-300 enabled:hover:bg-red-100 focus:ring-4 focus:ring-red-300 :bg-red-600 dark:text-white dark:border-red-600 dark:enabled:hover:bg-red-700 dark:enabled:hover:border-red-700 dark:focus:ring-red-700",
    "teal": "text-teal-900 bg-white border border-teal-300 enabled:hover:bg-teal-100 focus:ring-4 focus:ring-teal-300 :bg-teal-600 dark:text-white dark:border-teal-600 dark:enabled:hover:bg-teal-700 dark:enabled:hover:border-teal-700 dark:focus:ring-teal-700",
    "yellow": "text-yellow-900 bg-white border border-yellow-300 enabled:hover:bg-yellow-100 focus:ring-4 focus:ring-yellow-300 :bg-yellow-600 dark:text-white dark:border-yellow-600 dark:enabled:hover:bg-yellow-700 dark:enabled:hover:border-yellow-700 dark:focus:ring-yellow-700"
  },
  "disabled": "cursor-not-allowed opacity-50",
  "isProcessing": "cursor-wait",
  "spinnerSlot": "absolute h-full top-0 flex items-center animate-fade-in",
  "spinnerLeftPosition": {
    "xs": "left-2",
    "sm": "left-3",
    "md": "left-4",
    "lg": "left-5",
    "xl": "left-6"
  },
  "gradient": {
    "cyan": "text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800",
    "failure": "text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800",
    "info": "text-white bg-gradient-to-r from-cyan-500 via-cyan-600 to-cyan-700 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800 ",
    "lime": "text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-800",
    "pink": "text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800",
    "purple": "text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800",
    "success": "text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800",
    "teal": "text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800"
  },
  "gradientDuoTone": {
    "cyanToBlue": "text-white bg-gradient-to-r from-cyan-500 to-cyan-500 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800",
    "greenToBlue": "text-white bg-gradient-to-br from-green-400 to-cyan-600 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800",
    "pinkToOrange": "text-white bg-gradient-to-br from-pink-500 to-orange-400 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800",
    "purpleToBlue": "text-white bg-gradient-to-br from-purple-600 to-cyan-500 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800",
    "purpleToPink": "text-white bg-gradient-to-r from-purple-500 to-pink-500 enabled:hover:bg-gradient-to-l focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-800",
    "redToYellow": "text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-red-100 dark:focus:ring-red-400",
    "tealToLime": "text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 enabled:hover:bg-gradient-to-l enabled:hover:from-teal-200 enabled:hover:to-lime-200 enabled:hover:text-gray-900 focus:ring-4 focus:ring-lime-200 dark:focus:ring-teal-700"
  },
  "inner": {
    "base": "flex items-stretch items-center transition-all duration-200",
    "position": {
      "none": "",
      "start": "rounded-r-none",
      "middle": "rounded-none",
      "end": "rounded-l-none"
    },
    "outline": "border border-transparent",
    "isProcessingPadding": {
      "xs": "pl-8",
      "sm": "pl-10",
      "md": "pl-12",
      "lg": "pl-16",
      "xl": "pl-20"
    }
  },
  "label": "ml-2 inline-flex h-4 w-4 items-center justify-center rounded-full bg-cyan-200 text-xs font-semibold text-cyan-800",
  "outline": {
    "color": {
      "gray": "border border-gray-900 dark:border-white",
      "default": "border-0",
      "light": ""
    },
    "off": "",
    "on": "flex justify-center bg-white text-gray-900 transition-all duration-75 ease-in group-enabled:group-hover:bg-opacity-0 group-enabled:group-hover:text-inherit dark:bg-gray-900 dark:text-white w-full",
    "pill": {
      "off": "rounded-md",
      "on": "rounded-full"
    }
  },
  "pill": {
    "off": "rounded-lg",
    "on": "rounded-full"
  },
  "size": {
    "xs": "text-xs px-2 py-1",
    "sm": "text-sm px-3 py-1.5",
    "md": "text-sm px-4 py-2",
    "lg": "text-base px-5 py-2.5",
    "xl": "text-base px-6 py-3"
  }
}

References#

• Flowbite Buttons