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 { radixChevronRight } from '@ng-icons/radix-icons';

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

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 { radixEnvelopeClosed } from '@ng-icons/radix-icons';

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

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

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

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 {}