Spartans get ready! v1 is coming!

We are very close to our first stable release. Expect more announcements in the coming weeks. v1 was made possible by our partner Zerops.

Toggle Group

A group of toggle buttons.

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
import { BrnToggleGroup, BrnToggleGroupItem } from '@spartan-ng/brain/toggle-group';

import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmToggleGroup, HlmToggleGroupItem } from '@spartan-ng/helm/toggle-group';

@Component({
	selector: 'spartan-toggle-group-preview',
	providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
	imports: [BrnToggleGroup, BrnToggleGroupItem, HlmToggleGroup, HlmToggleGroupItem, HlmIcon, NgIcon],
	template: `
		<brn-toggle-group hlm multiple="true" nullable="true">
			<button aria-label="Bold" value="bold" hlmToggleGroupItem>
				<ng-icon hlm size="sm" name="lucideBold" />
			</button>

			<button aria-label="Italic" value="italic" hlmToggleGroupItem>
				<ng-icon hlm size="sm" name="lucideItalic" />
			</button>

			<button aria-label="Underline" value="underline" hlmToggleGroupItem>
				<ng-icon hlm size="sm" name="lucideUnderline" />
			</button>
		</brn-toggle-group>
	`,
})
export class ToggleGroupPreview {}

Installation

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

Usage

import {
 BrnToggleGroupItem
 BrnToggleGroup
} from '@spartan-ng/brain/toggle-group';
import {
 HlmToggleGroupItem
 HlmToggleGroup
} from '@spartan-ng/helm/toggle-group';

<brn-toggle-group hlm nullable="true">
  <button aria-label="Bold" value="bold" hlmToggleGroupItem>
 	 <ng-icon hlm size="sm" name="lucideBold" />
  </button>
</brn-toggle-group>

Examples

Outline

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
import { BrnToggleGroup, BrnToggleGroupItem } from '@spartan-ng/brain/toggle-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmToggleGroup, HlmToggleGroupItem } from '@spartan-ng/helm/toggle-group';

@Component({
	selector: 'spartan-toggle-group-outline',
	imports: [BrnToggleGroupItem, BrnToggleGroup, HlmIcon, HlmToggleGroupItem, HlmToggleGroup, NgIcon],
	providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
	template: `
		<brn-toggle-group hlm multiple="true" nullable="true" variant="outline">
			<button aria-label="Bold" value="bold" hlmToggleGroupItem>
				<ng-icon hlm size="sm" name="lucideBold" />
			</button>

			<button aria-label="Italic" value="italic" hlmToggleGroupItem>
				<ng-icon hlm size="sm" name="lucideItalic" />
			</button>

			<button aria-label="Underline" value="underline" hlmToggleGroupItem>
				<ng-icon hlm size="sm" name="lucideUnderline" />
			</button>
		</brn-toggle-group>
	`,
})
export class ToggleGroupOutlinePreview {}

Small

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
import { BrnToggleGroup, BrnToggleGroupItem } from '@spartan-ng/brain/toggle-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmToggleGroup, HlmToggleGroupItem } from '@spartan-ng/helm/toggle-group';

@Component({
	selector: 'spartan-toggle-group-small',
	imports: [BrnToggleGroupItem, BrnToggleGroup, HlmIcon, HlmToggleGroupItem, HlmToggleGroup, NgIcon],
	providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
	template: `
		<brn-toggle-group hlm multiple="false" nullable="true" size="sm">
			<button aria-label="Bold" value="bold" hlmToggleGroupItem>
				<ng-icon hlm size="sm" name="lucideBold" />
			</button>

			<button aria-label="Italic" value="italic" hlmToggleGroupItem>
				<ng-icon hlm size="sm" name="lucideItalic" />
			</button>

			<button aria-label="Underline" value="underline" hlmToggleGroupItem>
				<ng-icon hlm size="sm" name="lucideUnderline" />
			</button>
		</brn-toggle-group>
	`,
})
export class ToggleGroupSmallPreview {}

Large

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
import { BrnToggleGroup, BrnToggleGroupItem } from '@spartan-ng/brain/toggle-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmToggleGroup, HlmToggleGroupItem } from '@spartan-ng/helm/toggle-group';

@Component({
	selector: 'spartan-toggle-group-large',
	imports: [BrnToggleGroupItem, BrnToggleGroup, HlmIcon, HlmToggleGroupItem, HlmToggleGroup, NgIcon],
	providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
	template: `
		<brn-toggle-group hlm multiple="false" nullable="true" size="lg">
			<button aria-label="Bold" value="bold" hlmToggleGroupItem>
				<ng-icon hlm size="sm" name="lucideBold" />
			</button>

			<button aria-label="Italic" value="italic" hlmToggleGroupItem>
				<ng-icon hlm size="sm" name="lucideItalic" />
			</button>

			<button aria-label="Underline" value="underline" hlmToggleGroupItem>
				<ng-icon hlm size="sm" name="lucideUnderline" />
			</button>
		</brn-toggle-group>
	`,
})
export class ToggleGroupLargePreview {}

Disabled

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
import { BrnToggleGroup, BrnToggleGroupItem } from '@spartan-ng/brain/toggle-group';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmToggleGroup, HlmToggleGroupItem } from '@spartan-ng/helm/toggle-group';

@Component({
	selector: 'spartan-toggle-group-disabled',
	imports: [BrnToggleGroupItem, BrnToggleGroup, HlmIcon, HlmToggleGroupItem, HlmToggleGroup, NgIcon],
	providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
	template: `
		<brn-toggle-group hlm multiple="false" nullable="true" size="sm" disabled>
			<button aria-label="Bold" value="bold" hlmToggleGroupItem>
				<ng-icon hlm size="sm" name="lucideBold" />
			</button>

			<button aria-label="Italic" value="italic" hlmToggleGroupItem>
				<ng-icon hlm size="sm" name="lucideItalic" />
			</button>

			<button aria-label="Underline" value="underline" hlmToggleGroupItem>
				<ng-icon hlm size="sm" name="lucideUnderline" />
			</button>
		</brn-toggle-group>
	`,
})
export class ToggleGroupDisabledPreview {}

Brain API

BrnToggleGroup

Selector: brn-toggle-group

ExportAs: brnToggleGroup

Inputs

Prop	Type	Default	Description
vertical	boolean	false	Whether the button toggle group has a vertical orientation
nullable	boolean	false	Whether no button toggles need to be selected.
multiple	boolean	false	Whether multiple button toggles can be selected.
disabled	boolean	false	Whether the button toggle group is disabled.
value	ToggleValue<T>	undefined	Value of the toggle group.

Outputs

Prop	Type	Default	Description
valueChange	ToggleValue<T>	-	Emits when the value changes.
change	BrnButtonToggleChange<T>	-	Emit event when the group value changes.
valueChanged	ToggleValue<T>	undefined	Value of the toggle group.

BrnToggleGroupItem

Selector: button[hlmToggleGroupItem], button[brnToggleGroupItem]

Inputs

Prop	Type	Default	Description
id	unknown	`brn-toggle-group-item-${++BrnToggleGroupItem._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

HlmToggleGroup

Selector: brn-toggle-group[hlm],[hlmToggleGroup]

Inputs

Prop	Type	Default	Description
variant	ToggleGroupItemVariants['variant']	outline	-
size	ToggleGroupItemVariants['size']	sm	-
class	ClassValue	-	-

HlmToggleGroupItem

Selector: [hlmToggleGroupItem],[brnToggleGroupItem][hlm]

Inputs

Prop	Type	Default	Description
variant	ToggleGroupItemVariants['variant']	outline	-
size	ToggleGroupItemVariants['size']	sm	-
class	ClassValue	-	-

Tooltip

Toggle