feat: make flowbite-button usable as directive

apps/docs/docs/components/button/component.md

@@ -0,0 +1,141 @@
+---
+title: Component
+route: component
+keyword: ButtonComponentPage
+---
+
+{% import "../../shared/component-deprecated-usage.md" as cdu %}
+
+{{ cdu.deprecated() }}
+
+## Default button
+
+{{ NgDocActions.demo('c_default', {container: false}) }}
+
+```angular-html file="./component/_default.component.html" group="default" name="html"
+
+```
+
+```angular-ts file="./component/_default.component.ts"#L1-L1 group="default" name="typescript"
+
+```
+
+## Button pills
+
+{{ NgDocActions.demo('c_pill', {container: false}) }}
+
+```angular-html file="./component/_pill.component.html" group="pill" name="html"
+
+```
+
+```angular-ts file="./component/_pill.component.ts"#L1-L1 group="pill" name="typescript"
+
+```
+
+## Gradient monochrome
+
+{{ NgDocActions.demo('c_gradient_monochrome', {container: false}) }}
+
+```angular-html file="./component/_gradient-monochrome.component.html" group="gradient-monochrome" name="html"
+
+```
+
+```angular-ts file="./component/_gradient-monochrome.component.ts"#L1-L1 group="gradient-monochrome" name="typescript"
+
+```
+
+## Gradient duo-tone
+
+{{ NgDocActions.demo('c_gradient_duotone', {container: false}) }}
+
+```angular-html file="./component/_gradient-duotone.component.html" group="gradient-duotone" name="html"
+
+```
+
+```angular-ts file="./component/_gradient-duotone.component.ts"#L1-L1 group="gradient-duotone" name="typescript"
+
+```
+
+## Gradient outline
+
+{{ NgDocActions.demo('c_gradient_outline', {container: false}) }}
+
+```angular-html file="./component/_gradient-outline.component.html" group="gradient-outline" name="html"
+
+```
+
+```angular-ts file="./component/_gradient-outline.component.ts"#L1-L1 group="gradient-outline" name="typescript"
+
+```
+
+## Outline buttons
+
+{{ NgDocActions.demo('c_outline', {container: false}) }}
+
+```angular-html file="./component/_outline.component.html" group="outline" name="html"
+
+```
+
+```angular-ts file="./component/_outline.component.ts"#L1-L1 group="outline" name="typescript"
+
+```
+
+## Button sizes
+
+{{ NgDocActions.demo('c_size', {container: false}) }}
+
+```angular-html file="./component/_size.component.html" group="size" name="html"
+
+```
+
+```angular-ts file="./component/_size.component.ts"#L1-L1 group="size" name="typescript"
+
+```
+
+## Button with icon
+
+{{ NgDocActions.demo('c_icon', {container: false}) }}
+
+```angular-html file="./component/_icon.component.html" group="icon" name="html"
+
+```
+
+```angular-ts file="./component/_icon.component.ts"#L1-L2 group="icon" name="typescript"
+
+```
+
+## Button with label
+
+{{ NgDocActions.demo('c_label', {container: false}) }}
+
+```angular-html file="./component/_label.component.html" group="label" name="html"
+
+```
+
+```angular-ts file="./component/_label.component.ts"#L1-L2 group="label" name="typescript"
+
+```
+
+## Icon buttons
+
+{{ NgDocActions.demo('c_icon_only', {container: false}) }}
+
+```angular-html file="./component/_icon-only.component.html" group="icon-only" name="html"
+
+```
+
+```angular-ts file="./component/_icon-only.component.ts"#L1-L2 group="icon-only" name="typescript"
+
+```
+
+## Disabled
+
+{{ NgDocActions.demo('c_disabled', {container: false}) }}
+
+```angular-html file="./component/_disabled.component.html" group="disabled" name="html"
+
+```
+
+```angular-ts file="./component/_disabled.component.ts"#L1-L1 group="disabled" name="typescript"
+
+```

apps/docs/docs/components/button/directive/_default.component.html

@@ -0,0 +1,31 @@
+<button flowbite-button>Default</button>
+<button
+  flowbite-button
+  color="dark">
+  Dark
+</button>
+<button
+  flowbite-button
+  color="light">
+  Light
+</button>
+<button
+  flowbite-button
+  color="green">
+  Success
+</button>
+<button
+  flowbite-button
+  color="red">
+  Failure
+</button>
+<button
+  flowbite-button
+  color="yellow">
+  Warning
+</button>
+<button
+  flowbite-button
+  color="purple">
+  Purple
+</button>

apps/docs/docs/components/button/directive/_default.component.ts

@@ -0,0 +1,13 @@
+import { ButtonComponent } from 'flowbite-angular/button';
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'flowbite-demo-button-default',
+  imports: [ButtonComponent],
+  templateUrl: './_default.component.html',
+  host: {
+    class: 'flex flex wrap flex-row gap-3',
+  },
+})
+export class FlowbiteDefaultComponent {}

apps/docs/docs/components/button/directive/_disabled.component.html

@@ -0,0 +1,11 @@
+<button
+  flowbite-button
+  [isDisabled]="true">
+  Disabled button
+</button>
+<button
+  flowbite-button
+  color="blue"
+  [isDisabled]="true">
+  Disabled button
+</button>

apps/docs/docs/components/button/directive/_disabled.component.ts

@@ -0,0 +1,13 @@
+import { ButtonComponent } from 'flowbite-angular/button';
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'flowbite-demo-button-disabled',
+  imports: [ButtonComponent],
+  templateUrl: './_disabled.component.html',
+  host: {
+    class: 'flex flex wrap flex-row gap-3',
+  },
+})
+export class FlowbiteDisabledComponent {}

apps/docs/docs/components/button/directive/_gradient-duotone.component.html

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

apps/docs/docs/components/button/directive/_gradient-duotone.component.ts

@@ -0,0 +1,13 @@
+import { ButtonComponent } from 'flowbite-angular/button';
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'flowbite-demo-button-gradient-duotone',
+  imports: [ButtonComponent],
+  templateUrl: './_gradient-duotone.component.html',
+  host: {
+    class: 'flex flex wrap flex-row gap-3',
+  },
+})
+export class FlowbiteGradientDuotoneComponent {}

apps/docs/docs/components/button/directive/_gradient-monochrome.component.html

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

apps/docs/docs/components/button/directive/_gradient-monochrome.component.ts

@@ -0,0 +1,13 @@
+import { ButtonComponent } from 'flowbite-angular/button';
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'flowbite-demo-button-gradient-monochrome',
+  imports: [ButtonComponent],
+  templateUrl: './_gradient-monochrome.component.html',
+  host: {
+    class: 'flex flex wrap flex-row gap-3',
+  },
+})
+export class FlowbiteGradientMonochromeComponent {}

apps/docs/docs/components/button/directive/_gradient-outline.component.html

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

apps/docs/docs/components/button/directive/_gradient-outline.component.ts

@@ -0,0 +1,13 @@
+import { ButtonComponent } from 'flowbite-angular/button';
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'flowbite-demo-button-gradient-outline',
+  imports: [ButtonComponent],
+  templateUrl: './_gradient-outline.component.html',
+  host: {
+    class: 'flex flex wrap flex-row gap-3',
+  },
+})
+export class FlowbiteGradientOutlineComponent {}