feat: create button examples

apps/www/src/content/docs/docs/components/button.mdx

@@ -0,0 +1,77 @@
+---
+title: Button
+description: Displays a button or a component that looks like a button.
+---
+
+import { Tabs, TabItem } from "@astrojs/starlight/components";
+import { Steps } from "@astrojs/starlight/components";
+
+<ComponentPreview name="button-demo" />
+
+## Installation
+
+<Tabs>
+  <TabItem label="CLI">
+    ```bash frame="code"
+    npx shadcn-ng@latest add button
+    ```
+  </TabItem>
+
+  <TabItem label="Manual">
+    <Steps>
+        1. Copy and paste the following code into your project.
+            <ComponentSource name="button" />
+
+        2. Update the import paths to match your project setup.
+    </Steps>
+
+  </TabItem>
+</Tabs>
+
+## Usage
+
+```ts
+import { UbButtonDirective } from "@/components/ui/button.directive";
+```
+
+```angular-html
+<button ubButton>Button</button>
+```
+
+## Examples
+
+### Primary
+
+<ComponentPreview name="button-demo" />
+
+### Secondary
+
+<ComponentPreview name="button-secondary" />
+
+### Destructive
+
+<ComponentPreview name="button-destructive" />
+
+### Outline
+
+<ComponentPreview name="button-outline" />
+
+### Ghost
+
+<ComponentPreview name="button-ghost" />
+
+### Link
+
+<ComponentPreview name="button-link" />
+
+### Icon
+
+<ComponentPreview name="button-icon" />
+
+### With Icon
+
+<ComponentPreview name="button-with-icon" />
+
+### Loading
+
+<ComponentPreview name="button-loading" />

apps/www/src/registry/default/example/button-demo.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+
+import { UbButtonDirective } from "@/registry/default/ui/button.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbButtonDirective],
+  template: `<button ubButton>Button</button>`,
+})
+export class ButtonDemoComponent {}
+
+export default ButtonDemoComponent;

apps/www/src/registry/default/example/button-destructive.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+
+import { UbButtonDirective } from "@/registry/default/ui/button.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbButtonDirective],
+  template: `<button ubButton variant="destructive">Button</button>`,
+})
+export class ButtonDemoComponent {}
+
+export default ButtonDemoComponent;

apps/www/src/registry/default/example/button-ghost.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+
+import { UbButtonDirective } from "@/registry/default/ui/button.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbButtonDirective],
+  template: `<button ubButton variant="ghost">Button</button>`,
+})
+export class ButtonDemoComponent {}
+
+export default ButtonDemoComponent;

apps/www/src/registry/default/example/button-icon.ts

@@ -0,0 +1,18 @@
+import { Component } from "@angular/core";
+
+import { NgIconComponent, provideIcons } from "@ng-icons/core";
+import { lucideChevronRight } from "@ng-icons/lucide";
+
+import { UbButtonDirective } from "@/registry/default/ui/button.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbButtonDirective, NgIconComponent],
+  viewProviders: [provideIcons({ lucideChevronRight })],
+  template: `<button ubButton variant="outline" size="icon">
+    <ng-icon name="lucideChevronRight" class="h-4 w-4" />
+  </button>`,
+})
+export class ButtonDemoComponent {}
+
+export default ButtonDemoComponent;

apps/www/src/registry/default/example/button-link.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+
+import { UbButtonDirective } from "@/registry/default/ui/button.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbButtonDirective],
+  template: `<button ubButton variant="link">Button</button>`,
+})
+export class ButtonDemoComponent {}
+
+export default ButtonDemoComponent;

apps/www/src/registry/default/example/button-loading.ts

@@ -0,0 +1,19 @@
+import { Component } from "@angular/core";
+
+import { NgIconComponent, provideIcons } from "@ng-icons/core";
+import { radixReload } from "@ng-icons/radix-icons";
+
+import { UbButtonDirective } from "@/registry/default/ui/button.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbButtonDirective, NgIconComponent],
+  viewProviders: [provideIcons({ radixReload })],
+  template: `<button ubButton disabled>
+    <ng-icon name="radixReload" class="mr-2 h-4 w-4 animate-spin" />
+    Please wait
+  </button>`,
+})
+export class ButtonDemoComponent {}
+
+export default ButtonDemoComponent;

apps/www/src/registry/default/example/button-outline.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+
+import { UbButtonDirective } from "@/registry/default/ui/button.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbButtonDirective],
+  template: `<button ubButton variant="outline">Button</button>`,
+})
+export class ButtonDemoComponent {}
+
+export default ButtonDemoComponent;

apps/www/src/registry/default/example/button-secondary.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+
+import { UbButtonDirective } from "@/registry/default/ui/button.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbButtonDirective],
+  template: `<button ubButton variant="secondary">Button</button>`,
+})
+export class ButtonDemoComponent {}
+
+export default ButtonDemoComponent;

apps/www/src/registry/default/example/button-with-icon.ts

@@ -0,0 +1,19 @@
+import { Component } from "@angular/core";
+
+import { NgIconComponent, provideIcons } from "@ng-icons/core";
+import { radixEnvelopeOpen } from "@ng-icons/radix-icons";
+
+import { UbButtonDirective } from "@/registry/default/ui/button.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbButtonDirective, NgIconComponent],
+  viewProviders: [provideIcons({ radixEnvelopeOpen })],
+  template: `<button ubButton>
+    <ng-icon name="radixEnvelopeOpen" class="mr-2 h-4 w-4" />
+    Login with Email
+  </button>`,
+})
+export class ButtonDemoComponent {}
+
+export default ButtonDemoComponent;

apps/www/src/registry/new-york/example/button-demo.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+
+import { UbButtonDirective } from "@/registry/new-york/ui/button.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbButtonDirective],
+  template: `<button ubButton>Button</button>`,
+})
+export class ButtonDemoComponent {}
+
+export default ButtonDemoComponent;

apps/www/src/registry/new-york/example/button-destructive.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+
+import { UbButtonDirective } from "@/registry/new-york/ui/button.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbButtonDirective],
+  template: `<button ubButton variant="destructive">Button</button>`,
+})
+export class ButtonDemoComponent {}
+
+export default ButtonDemoComponent;

apps/www/src/registry/new-york/example/button-ghost.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+
+import { UbButtonDirective } from "@/registry/new-york/ui/button.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbButtonDirective],
+  template: `<button ubButton variant="ghost">Button</button>`,
+})
+export class ButtonDemoComponent {}
+
+export default ButtonDemoComponent;

apps/www/src/registry/new-york/example/button-icon.ts

@@ -0,0 +1,18 @@
+import { Component } from "@angular/core";
+
+import { NgIconComponent, provideIcons } from "@ng-icons/core";
+import { lucideChevronRight } from "@ng-icons/lucide";
+
+import { UbButtonDirective } from "@/registry/new-york/ui/button.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbButtonDirective, NgIconComponent],
+  viewProviders: [provideIcons({ lucideChevronRight })],
+  template: `<button ubButton variant="outline" size="icon">
+    <ng-icon name="lucideChevronRight" class="h-4 w-4" />
+  </button>`,
+})
+export class ButtonDemoComponent {}
+
+export default ButtonDemoComponent;

apps/www/src/registry/new-york/example/button-link.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+
+import { UbButtonDirective } from "@/registry/new-york/ui/button.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbButtonDirective],
+  template: `<button ubButton variant="link">Button</button>`,
+})
+export class ButtonDemoComponent {}
+
+export default ButtonDemoComponent;

apps/www/src/registry/new-york/example/button-loading.ts

@@ -0,0 +1,19 @@
+import { Component } from "@angular/core";
+
+import { NgIconComponent, provideIcons } from "@ng-icons/core";
+import { radixReload } from "@ng-icons/radix-icons";
+
+import { UbButtonDirective } from "@/registry/new-york/ui/button.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbButtonDirective, NgIconComponent],
+  viewProviders: [provideIcons({ radixReload })],
+  template: `<button ubButton disabled>
+    <ng-icon name="radixReload" class="mr-2 h-4 w-4 animate-spin" />
+    Please wait
+  </button>`,
+})
+export class ButtonDemoComponent {}
+
+export default ButtonDemoComponent;

apps/www/src/registry/new-york/example/button-outline.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+
+import { UbButtonDirective } from "@/registry/new-york/ui/button.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbButtonDirective],
+  template: `<button ubButton variant="outline">Button</button>`,
+})
+export class ButtonDemoComponent {}
+
+export default ButtonDemoComponent;

apps/www/src/registry/new-york/example/button-secondary.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+
+import { UbButtonDirective } from "@/registry/new-york/ui/button.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbButtonDirective],
+  template: `<button ubButton variant="secondary">Button</button>`,
+})
+export class ButtonDemoComponent {}
+
+export default ButtonDemoComponent;

apps/www/src/registry/new-york/example/button-with-icon.ts

@@ -0,0 +1,19 @@
+import { Component } from "@angular/core";
+
+import { NgIconComponent, provideIcons } from "@ng-icons/core";
+import { radixEnvelopeOpen } from "@ng-icons/radix-icons";
+
+import { UbButtonDirective } from "@/registry/new-york/ui/button.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbButtonDirective, NgIconComponent],
+  viewProviders: [provideIcons({ radixEnvelopeOpen })],
+  template: `<button ubButton>
+    <ng-icon name="radixEnvelopeOpen" class="mr-2 h-4 w-4" />
+    Login with Email
+  </button>`,
+})
+export class ButtonDemoComponent {}
+
+export default ButtonDemoComponent;