Getting Started
Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Dropdown Menu
- Empty
- Field
- Form Field
- Hover Card
- Icon
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Label
- Menubar
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner (Toast)
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
Stack
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 { lucideBookmark } from '@ng-icons/lucide';
import { HlmToggleImports } from '@spartan-ng/helm/toggle';
@Component({
selector: 'spartan-toggle-preview',
imports: [HlmToggleImports, NgIcon],
providers: [provideIcons({ lucideBookmark })],
template: `
<button
hlmToggle
size="sm"
variant="outline"
aria-label="Toggle bookmark"
class="data-[state=on]:bg-transparent data-[state=on]:*:[ng-icon]:*:[svg]:fill-red-500 data-[state=on]:*:[ng-icon]:*:[svg]:stroke-red-500"
>
<ng-icon name="lucideBookmark" />
Bookmark
</button>
`,
})
export class TogglePreview {}Installation
ng g @spartan-ng/cli:ui toggle
npx nx g @spartan-ng/cli:ui toggle
Usage
import { HlmToggleImports } from '@spartan-ng/helm/toggle';<button hlmToggle>Toggle</button>Examples
Outline
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideItalic } from '@ng-icons/lucide';
import { HlmToggleImports } from '@spartan-ng/helm/toggle';
@Component({
selector: 'spartan-toggle-outline',
imports: [HlmToggleImports, NgIcon],
providers: [provideIcons({ lucideItalic })],
template: `
<button hlmToggle variant="outline" aria-label="Toggle Italic">
<ng-icon 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 { HlmToggleImports } from '@spartan-ng/helm/toggle';
@Component({
selector: 'spartan-toggle-with-text',
imports: [HlmToggleImports, NgIcon],
providers: [provideIcons({ lucideItalic })],
template: `
<button hlmToggle aria-label="Toggle italic">
<ng-icon name="lucideItalic" />
Italic
</button>
`,
})
export class ToggleWithTextPreview {}Small
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideItalic } from '@ng-icons/lucide';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmToggleImports } from '@spartan-ng/helm/toggle';
@Component({
selector: 'spartan-toggle-small',
imports: [HlmToggleImports, HlmIconImports],
providers: [provideIcons({ lucideItalic })],
template: `
<button hlmToggle size="sm" aria-label="Toggle italic">
<ng-icon hlm size="sm" name="lucideItalic" />
</button>
`,
})
export class ToggleSmallPreview {}Large
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideItalic } from '@ng-icons/lucide';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmToggleImports } from '@spartan-ng/helm/toggle';
@Component({
selector: 'spartan-toggle-large',
imports: [HlmToggleImports, HlmIconImports],
providers: [provideIcons({ lucideItalic })],
template: `
<button hlmToggle size="lg" aria-label="Toggle italic">
<ng-icon hlm size="lg" name="lucideItalic" />
</button>
`,
})
export class ToggleLargePreview {}Disabled
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideUnderline } from '@ng-icons/lucide';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmToggleImports } from '@spartan-ng/helm/toggle';
@Component({
selector: 'spartan-toggle-disabled',
imports: [HlmToggleImports, HlmIconImports],
providers: [provideIcons({ lucideUnderline })],
template: `
<button hlmToggle aria-label="Toggle underline" disabled>
<ng-icon hlm size="sm" name="lucideUnderline" />
</button>
`,
})
export class ToggleDisabledPreview {}Brain API
BrnToggle
Selector: 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. |
| type | 'button' | 'submit' | 'reset' | button | The type of the button. |
| aria-label | string | null | null | Accessibility label for screen readers. Use when no visible label exists. |
| 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: button[hlmToggle]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | ToggleVariants['variant'] | default | - |
| size | ToggleVariants['size'] | default | - |
| class | ClassValue | - | - |