Button

import { Component } from '@angular/core';
 
import { ZardIconComponent } from '../../icon/icon.component';
import { ZardButtonComponent } from '../button.component';
 
@Component({
  selector: 'z-demo-button-default',
  imports: [ZardButtonComponent, ZardIconComponent],
  standalone: true,
  template: `
    <button z-button zType="outline">Button</button>
    <button z-button zType="outline"><i z-icon zType="arrow-up"></i></button>
    <button z-button zType="outline">
      Button
      <i z-icon zType="popcorn"></i>
    </button>
  `,
})
export class ZardDemoButtonDefaultComponent {}
 

import { Component } from '@angular/core';
 
import { ZardButtonComponent } from '../button.component';
 
@Component({
  selector: 'z-demo-button-type',
  imports: [ZardButtonComponent],
  standalone: true,
  template: `
    <button z-button zSize="sm">Default</button>
    <button z-button zSize="sm" zType="outline">Outline</button>
    <button z-button zSize="sm" zType="destructive">Destructive</button>
    <button z-button zSize="sm" zType="secondary">Secondary</button>
    <button z-button zSize="sm" zType="ghost">Ghost</button>
    <button z-button zSize="sm" zType="link">Link</button>
  `,
  host: {
    class: 'flex flex-col items-center gap-4 md:flex-row md:gap-8',
  },
})
export class ZardDemoButtonTypeComponent {}
 

import { Component } from '@angular/core';
 
import { ZardIconComponent } from '../../icon/icon.component';
import { ZardButtonComponent } from '../button.component';
 
@Component({
  selector: 'z-demo-button-size',
  imports: [ZardButtonComponent, ZardIconComponent],
  standalone: true,
  template: `
    <div class="flex flex-col items-center">
      <div class="mb-4 flex gap-2">
        <button z-button zSize="sm">Small</button>
        <button z-button zSize="sm"><z-icon zType="arrow-up" /></button>
      </div>
 
      <div class="mb-4 flex gap-2">
        <button z-button>Default</button>
        <button z-button><z-icon zType="arrow-up" /></button>
      </div>
 
      <div class="mb-4 flex gap-2">
        <button z-button zSize="lg">Large</button>
        <button z-button zSize="lg"><z-icon zType="arrow-up" /></button>
      </div>
    </div>
  `,
})
export class ZardDemoButtonSizeComponent {}