React Buttons - Flowbite

Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows

The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages.

Flowbite React provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more.

Default buttons

<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

<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

<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 duo-tone

<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

<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

<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

<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

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

Icon buttons

<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>

Loader

<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

<Button disabled>
  Disabled button
</Button>