Toggle
A two-state button that can be either on or off.
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideItalic } from '@ng-icons/lucide';
import { BrnToggle } from '@spartan-ng/brain/toggle';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmToggle } from '@spartan-ng/helm/toggle';
@Component({
selector: 'spartan-toggle-preview',
imports: [BrnToggle, HlmToggle, NgIcon, HlmIcon],
providers: [provideIcons({ lucideItalic })],
template: `
<button brnToggle hlm>
<ng-icon hlm size="sm" name="lucideItalic" />
</button>
`,
})
export class TogglePreview {}Installation
npx nx g @spartan-ng/cli:ui toggle
ng g @spartan-ng/cli:ui toggle
Usage
import { HlmToggleDirective } from '@spartan-ng/helm/toggle';
import { BrnToggleDirective } from '@spartan-ng/brain/toggle';<button brnToggle hlm>
<ng-icon hlm size="sm" name="lucideItalic" />
</button>Brain API
BrnToggle
Selector: button[hlmToggle], button[brnToggle]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| id | unknown | `brn-toggle-${BrnToggle._uniqueId++}` | The id of the toggle. |
| value | T | - | The value this toggle represents. |
| disabled | boolean | false | Whether the toggle is disabled. |
| disableToggleClick | boolean | false | Whether the toggle is responds to click events. |
| state | 'on' | 'off' | off | The current state of the toggle when not used in a group. |
Outputs
| Prop | Type | Default | Description |
|---|---|---|---|
| stateChanged | 'on' | 'off' | off | The current state of the toggle when not used in a group. |
Helm API
HlmToggle
Selector: [hlmToggle],[brnToggle][hlm]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | ToggleVariants['variant'] | default | - |
| size | ToggleVariants['size'] | default | - |
| class | ClassValue | - | - |
Examples
Outline
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideItalic } from '@ng-icons/lucide';
import { BrnToggle } from '@spartan-ng/brain/toggle';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmToggle } from '@spartan-ng/helm/toggle';
@Component({
selector: 'spartan-toggle-outline',
imports: [BrnToggle, HlmToggle, NgIcon, HlmIcon],
providers: [provideIcons({ lucideItalic })],
template: `
<button brnToggle hlm variant="outline">
<ng-icon hlm size="sm" name="lucideItalic" />
</button>
`,
})
export class ToggleOutlinePreview {}With Text
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideItalic } from '@ng-icons/lucide';
import { BrnToggle } from '@spartan-ng/brain/toggle';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmToggle } from '@spartan-ng/helm/toggle';
@Component({
selector: 'spartan-toggle-with-text',
imports: [BrnToggle, HlmToggle, NgIcon, HlmIcon],
providers: [provideIcons({ lucideItalic })],
template: `
<button brnToggle hlm>
<ng-icon hlm size="sm" name="lucideItalic" />
<span class="ml-2">Italic</span>
</button>
`,
})
export class ToggleWithTextPreview {}Small
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideItalic } from '@ng-icons/lucide';
import { BrnToggle } from '@spartan-ng/brain/toggle';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmToggle } from '@spartan-ng/helm/toggle';
@Component({
selector: 'spartan-toggle-small',
imports: [BrnToggle, HlmToggle, NgIcon, HlmIcon],
providers: [provideIcons({ lucideItalic })],
template: `
<button size="sm" brnToggle hlm>
<ng-icon hlm size="sm" name="lucideItalic" />
</button>
`,
})
export class ToggleSmallPreview {}Large
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideItalic } from '@ng-icons/lucide';
import { BrnToggle } from '@spartan-ng/brain/toggle';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmToggle } from '@spartan-ng/helm/toggle';
@Component({
selector: 'spartan-toggle-large',
imports: [BrnToggle, HlmToggle, NgIcon, HlmIcon],
providers: [provideIcons({ lucideItalic })],
template: `
<button size="lg" brnToggle hlm>
<ng-icon hlm size="lg" name="lucideItalic" />
</button>
`,
})
export class ToggleLargePreview {}Disabled
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideUnderline } from '@ng-icons/lucide';
import { BrnToggle } from '@spartan-ng/brain/toggle';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmToggle } from '@spartan-ng/helm/toggle';
@Component({
selector: 'spartan-toggle-disabled',
imports: [BrnToggle, HlmToggle, NgIcon, HlmIcon],
providers: [provideIcons({ lucideUnderline })],
template: `
<button disabled brnToggle hlm>
<ng-icon hlm size="sm" name="lucideUnderline" />
</button>
`,
})
export class ToggleDisabledPreview {}