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 { radixFontItalic } from '@ng-icons/radix-icons';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
@Component({
selector: 'spartan-toggle-preview',
standalone: true,
imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent],
providers: [provideIcons({ radixFontItalic })],
template: `
<button brnToggle hlm>
<hlm-icon size="sm" name="radixFontItalic" />
</button>
`,
})
export class TogglePreviewComponent {}Installation
npx nx g @spartan-ng/nx: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="radixFontItalic" />
</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 { radixFontItalic } from '@ng-icons/radix-icons';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
@Component({
selector: 'spartan-toggle-preview',
standalone: true,
imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent],
providers: [provideIcons({ radixFontItalic })],
template: `
<button brnToggle hlm>
<hlm-icon size="sm" name="radixFontItalic" />
</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 { radixFontItalic } from '@ng-icons/radix-icons';
@Component({
selector: 'spartan-toggle-outline',
standalone: true,
imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent],
providers: [provideIcons({ radixFontItalic })],
template: `
<button brnToggle hlm variant="outline">
<hlm-icon size="sm" name="radixFontItalic" />
</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 { radixFontItalic } from '@ng-icons/radix-icons';
@Component({
selector: 'spartan-toggle-with-text',
standalone: true,
imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent],
providers: [provideIcons({ radixFontItalic })],
template: `
<button brnToggle hlm>
<hlm-icon size="sm" name="radixFontItalic" />
<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 { radixFontItalic } from '@ng-icons/radix-icons';
@Component({
selector: 'spartan-toggle-small',
standalone: true,
imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent],
providers: [provideIcons({ radixFontItalic })],
template: `
<button size="sm" brnToggle hlm>
<hlm-icon size="sm" name="radixFontItalic" />
</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 { radixFontItalic } from '@ng-icons/radix-icons';
@Component({
selector: 'spartan-toggle-large',
standalone: true,
imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent],
providers: [provideIcons({ radixFontItalic })],
template: `
<button size="lg" brnToggle hlm>
<hlm-icon size="sm" name="radixFontItalic" />
</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 { radixUnderline } from '@ng-icons/radix-icons';
@Component({
selector: 'spartan-toggle-disabled',
standalone: true,
imports: [BrnToggleDirective, HlmToggleDirective, HlmIconComponent],
providers: [provideIcons({ radixUnderline })],
template: `
<button disabled brnToggle hlm>
<hlm-icon size="sm" name="radixUnderline" />
</button>
`,
})
export class ToggleDisabledPreviewComponent {}