Components are in alpha

Try them out! We'd love to hear your feedback! Expect breaking changes! Become the one making those changes on GitHub!

Toggle

A two-state button that can be either on or off.

import { Component } from '@angular/core';
import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm';
import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain';
import { provideIcons } from '@ng-icons/core';
import { lucideItalic } from '@ng-icons/lucide';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';

@Component({
  selector: 'spartan-toggle-preview',
  standalone: true,
  imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent],
  providers: [provideIcons({ lucideItalic })],
  template: `
    <button brnToggle hlm>
      <hlm-icon size="sm" name="lucideItalic" />
    </button>
  `,
})
export class TogglePreviewComponent {}

Installation

npx nx g @spartan-ng/cli:ui toggle

Usage

import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm';
import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain';

<button brnToggle hlm>
  <hlm-icon size="sm" name="lucideItalic" />
</button>

Examples

Default

import { Component } from '@angular/core';
import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm';
import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain';
import { provideIcons } from '@ng-icons/core';
import { lucideItalic } from '@ng-icons/lucide';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';

@Component({
  selector: 'spartan-toggle-preview',
  standalone: true,
  imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent],
  providers: [provideIcons({ lucideItalic })],
  template: `
    <button brnToggle hlm>
      <hlm-icon size="sm" name="lucideItalic" />
    </button>
  `,
})
export class TogglePreviewComponent {}

Outline

import { Component } from '@angular/core';
import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm';
import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
import { provideIcons } from '@ng-icons/core';
import { lucideItalic } from '@ng-icons/lucide';

@Component({
  selector: 'spartan-toggle-outline',
  standalone: true,
  imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent],
  providers: [provideIcons({ lucideItalic })],
  template: `
    <button brnToggle hlm variant="outline">
      <hlm-icon size="sm" name="lucideItalic" />
    </button>
  `,
})
export class ToggleOutlinePreviewComponent {}

With Text

import { Component } from '@angular/core';
import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm';
import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
import { provideIcons } from '@ng-icons/core';
import { lucideItalic } from '@ng-icons/lucide';

@Component({
  selector: 'spartan-toggle-with-text',
  standalone: true,
  imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent],
  providers: [provideIcons({ lucideItalic })],
  template: `
    <button brnToggle hlm>
      <hlm-icon size="sm" name="lucideItalic" />
      <span class="ml-2">Italic</span>
    </button>
  `,
})
export class ToggleWithTextPreviewComponent {}

Small

import { Component } from '@angular/core';
import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm';
import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
import { provideIcons } from '@ng-icons/core';
import { lucideItalic } from '@ng-icons/lucide';

@Component({
  selector: 'spartan-toggle-small',
  standalone: true,
  imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent],
  providers: [provideIcons({ lucideItalic })],
  template: `
    <button size="sm" brnToggle hlm>
      <hlm-icon size="sm" name="lucideItalic" />
    </button>
  `,
})
export class ToggleSmallPreviewComponent {}

Large

import { Component } from '@angular/core';
import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm';
import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
import { provideIcons } from '@ng-icons/core';
import { lucideItalic } from '@ng-icons/lucide';

@Component({
  selector: 'spartan-toggle-large',
  standalone: true,
  imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent],
  providers: [provideIcons({ lucideItalic })],
  template: `
    <button size="lg" brnToggle hlm>
      <hlm-icon size="lg" name="lucideItalic" />
    </button>
  `,
})
export class ToggleLargePreviewComponent {}

Disabled

import { Component } from '@angular/core';
import { HlmToggleDirective } from '@spartan-ng/ui-toggle-helm';
import { BrnToggleDirective } from '@spartan-ng/ui-toggle-brain';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
import { provideIcons } from '@ng-icons/core';
import { lucideUnderline } from '@ng-icons/lucide';

@Component({
  selector: 'spartan-toggle-disabled',
  standalone: true,
  imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent],
  providers: [provideIcons({ lucideUnderline })],
  template: `
    <button disabled brnToggle hlm>
      <hlm-icon size="sm" name="lucideUnderline" />
    </button>
  `,
})
export class ToggleDisabledPreviewComponent {}

Tooltip

Textarea