Button

import { Component } from '@angular/core';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';

@Component({
  selector: 'spartan-button-preview',
  standalone: true,
  imports: [HlmButtonDirective],
  template: ` <button hlmBtn>Button</button> `,
})
export class ButtonPreviewComponent {}

import { Component } from '@angular/core';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';

@Component({
  selector: 'spartan-button-preview',
  standalone: true,
  imports: [HlmButtonDirective],
  template: ` <button hlmBtn>Button</button> `,
})
export class ButtonPreviewComponent {}

import { Component } from '@angular/core';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';

@Component({
  selector: 'spartan-button-secondary',
  standalone: true,
  imports: [HlmButtonDirective],
  template: `
    <button hlmBtn variant='secondary'>Secondary</button> `,})
export class ButtonSecondaryComponent {}

import { Component } from '@angular/core';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';

@Component({
  selector: 'spartan-button-destructive',
  standalone: true,
  imports: [HlmButtonDirective],
  template: `
    <button hlmBtn variant='destructive'>Destructive</button> `,})
export class ButtonDestructiveComponent {}

import { Component } from '@angular/core';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';

@Component({
  selector: 'spartan-button-outline',
  standalone: true,
  imports: [HlmButtonDirective],
  template: `
    <button hlmBtn variant='outline'>Outline</button> `,})
export class ButtonOutlineComponent {}

import { Component } from '@angular/core';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';

@Component({
  selector: 'spartan-button-ghost',
  standalone: true,
  imports: [HlmButtonDirective],
  template: `
    <button hlmBtn variant='ghost'>Ghost</button> `,})
export class ButtonGhostComponent {}

import { Component } from '@angular/core';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';

@Component({
  selector: 'spartan-button-link',
  standalone: true,
  imports: [HlmButtonDirective],
  template: `
    <button hlmBtn variant='link'>Link</button> `,})
export class ButtonLinkComponent {}

import { Component } from '@angular/core';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import { HlmSpinnerComponent } from '@spartan-ng/ui-spinner-helm';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
import { provideIcons } from '@ng-icons/core';
import { lucideChevronRight } from '@ng-icons/lucide';

@Component({
  selector: 'spartan-button-icon',
  standalone: true,
  imports: [HlmButtonDirective, HlmSpinnerComponent, HlmIconComponent],
  providers: [provideIcons({ lucideChevronRight })],
  template: ` <button hlmBtn size="icon" variant="outline"><hlm-icon size='sm' name="lucideChevronRight" /></button> `,
})
export class ButtonIconComponent {}

import { Component } from '@angular/core';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
import { provideIcons } from '@ng-icons/core';
import { lucideMail } from '@ng-icons/lucide';

@Component({
  selector: 'spartan-button-with-icon',
  standalone: true,
  imports: [HlmButtonDirective, HlmIconComponent],
  providers: [provideIcons({ lucideMail })],
  template: `
    <button hlmBtn>
      <hlm-icon size="sm" class="mr-2" name="lucideMail" />
      Login with Email
    </button>
  `,
})
export class ButtonWithIconComponent {}

import { Component } from '@angular/core';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import { HlmSpinnerComponent } from '@spartan-ng/ui-spinner-helm';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
import { provideIcons } from '@ng-icons/core';
import { lucideLoader2 } from '@ng-icons/lucide';

@Component({
  selector: 'spartan-button-loading',
  standalone: true,
  imports: [HlmButtonDirective, HlmSpinnerComponent, HlmIconComponent],
  providers: [provideIcons({ lucideLoader2 })],
  template: `
    <button disabled hlmBtn><hlm-icon name="lucideLoader2" size="sm" class="mr-2 animate-spin" /> Please wait</button>
  `,
})
export class ButtonLoadingComponent {}

import { Component } from '@angular/core';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';

@Component({
  selector: 'spartan-button-anchor',
  standalone: true,
  imports: [HlmButtonDirective],
  template: ` <a hlmBtn target='_blank' variant="link" href="https://github.com/goetzrobin/spartan"> Star on GitHub </a> `,
})
export class ButtonAnchorComponent {}