feat: make flowbite-button usable as directive

Author: MGREMY

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"
+
+```