Button

<flowbite-button>Default</flowbite-button>
<flowbite-button color="dark">Dark</flowbite-button>
<flowbite-button color="light">Light</flowbite-button>
<flowbite-button color="green">Success</flowbite-button>
<flowbite-button color="red">Failure</flowbite-button>
<flowbite-button color="yellow">Warning</flowbite-button>
<flowbite-button color="purple">Purple</flowbite-button>

<flowbite-button
  [isPill]="true"
  color="dark">
  Dark
</flowbite-button>
<flowbite-button
  [isPill]="true"
  color="light">
  Light
</flowbite-button>
<flowbite-button
  [isPill]="true"
  color="green">
  Success
</flowbite-button>
<flowbite-button
  [isPill]="true"
  color="red">
  Failure
</flowbite-button>
<flowbite-button
  [isPill]="true"
  color="yellow">
  Warning
</flowbite-button>
<flowbite-button
  [isPill]="true"
  color="purple">
  Purple
</flowbite-button>

<flowbite-button gradientMonochrome="blue">Info</flowbite-button>
<flowbite-button gradientMonochrome="green">Success</flowbite-button>
<flowbite-button gradientMonochrome="cyan">Cyan</flowbite-button>
<flowbite-button gradientMonochrome="teal">Teal</flowbite-button>
<flowbite-button gradientMonochrome="lime">Lime</flowbite-button>
<flowbite-button gradientMonochrome="red">Failure</flowbite-button>
<flowbite-button gradientMonochrome="pink">Pink</flowbite-button>
<flowbite-button gradientMonochrome="purple">Purple</flowbite-button>

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

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

<flowbite-button fill="outline">Default</flowbite-button>
<flowbite-button
  fill="outline"
  color="dark">
  Dark
</flowbite-button>
<flowbite-button
  fill="outline"
  color="green">
  Success
</flowbite-button>
<flowbite-button
  fill="outline"
  color="red">
  Failure
</flowbite-button>
<flowbite-button
  fill="outline"
  color="yellow">
  Warning
</flowbite-button>
<flowbite-button
  fill="outline"
  color="purple">
  Purple
</flowbite-button>

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

<flowbite-button>
  <flowbite-icon
    svgIcon="outline:cart"
    class="mr-2 -ml-1 h-5 w-5" />
  Buy now
</flowbite-button>
<flowbite-button>
  Choose plan
  <flowbite-icon
    svgIcon="outline:arrow-right"
    class="ml-2 -mr-1 h-5 w-5" />
</flowbite-button>

<flowbite-button>
  Messages
  <flowbite-badge
    [isIconOnly]="true"
    class="ml-2">
    2
  </flowbite-badge>
</flowbite-button>

<flowbite-button>
  <flowbite-icon
    svgIcon="outline:arrow-right"
    class="h-5 w-5" />
</flowbite-button>
<flowbite-button [isPill]="true">
  <flowbite-icon
    svgIcon="outline:arrow-right"
    class="h-5 w-5" />
</flowbite-button>
<flowbite-button fill="outline">
  <flowbite-icon
    svgIcon="outline:arrow-right"
    class="h-5 w-5" />
</flowbite-button>
<flowbite-button
  fill="outline"
  [isPill]="true">
  <flowbite-icon
    svgIcon="outline:arrow-right"
    class="h-5 w-5" />
</flowbite-button>

<flowbite-button [isDisabled]="true">Disabled button</flowbite-button>
<flowbite-button
  color="blue"
  [isDisabled]="true">
  Disabled button
</flowbite-button>