Sonner

An opinionated toast component for Angular.

import { Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmToasterImports } from '@spartan-ng/helm/sonner';
import { toast } from 'ngx-sonner';

@Component({
	selector: 'spartan-sonner-preview',
	imports: [HlmToasterImports, HlmButtonImports],
	template: `
		<hlm-toaster />
		<button hlmBtn variant="outline" (click)="showToast()">Show Toast</button>
	`,
})
export class SonnerPreview {
	showToast() {
		toast('Event has been created', {
			description: 'Sunday, December 03, 2023 at 9:00 AM',
			action: {
				label: 'Undo',
				onClick: () => console.log('Undo'),
			},
		});
	}
}

About

Sonner is built on top of ngx-sonner by @tutkli .

Installation

ng g @spartan-ng/cli:ui sonner

Add the HlmToaster component to your root component.

src/app/app.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

import { HlmToasterImports } from '@spartan-ng/helm/sonner';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, HlmToasterImports],
  template: `
    <router-outlet />

    <hlm-toaster />
  `,
})
export class App {}

Usage

import { toast } from 'ngx-sonner';

toast('Event has been created.');

Examples

Types

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { toast } from 'ngx-sonner';

@Component({
	selector: 'spartan-sonner-types-example',
	imports: [HlmButtonImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="flex flex-wrap justify-center gap-2">
			<button hlmBtn variant="outline" (click)="showToast()">Default</button>
			<button hlmBtn variant="outline" (click)="showSuccess()">Success</button>
			<button hlmBtn variant="outline" (click)="showInfo()">Info</button>
			<button hlmBtn variant="outline" (click)="showError()">Error</button>
			<button hlmBtn variant="outline" (click)="showWarning()">Warning</button>
			<button hlmBtn variant="outline" (click)="showPromise()">Promise</button>
		</div>
	`,
})
export class SonnerTypesExample {
	showToast() {
		toast('Event has been created');
	}

	showSuccess() {
		toast.success('Event has been created');
	}

	showError() {
		toast.error('Failed to create event');
	}

	showWarning() {
		toast.warning('Event is missing a name');
	}

	showInfo() {
		toast.info('Event will start in 10 minutes');
	}

	showPromise() {
		toast.promise<{ name: string }>(
			() => new Promise((resolve) => setTimeout(() => resolve({ name: 'Angular Connect' }), 2000)),
			{
				loading: 'Loading...',
				success: (data) => `${data.name} has been created`,
				error: 'Error',
			},
		);
	}
}

Description

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { toast } from 'ngx-sonner';

@Component({
	selector: 'spartan-sonner-description-example',
	imports: [HlmButtonImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<button hlmBtn variant="outline" (click)="showToast()">Show Toast</button>
	`,
})
export class SonnerDescriptionExample {
	showToast() {
		toast('Event has been created', {
			description: 'Monday, January 3rd at 6:00pm',
		});
	}
}

Position

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { toast } from 'ngx-sonner';

@Component({
	selector: 'spartan-sonner-position-example',
	imports: [HlmButtonImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="flex flex-wrap justify-center gap-2">
			<button hlmBtn variant="outline" (click)="showTopLeft()">Top Left</button>
			<button hlmBtn variant="outline" (click)="showTopCenter()">Top Center</button>
			<button hlmBtn variant="outline" (click)="showTopRight()">Top Right</button>
			<button hlmBtn variant="outline" (click)="showBottomLeft()">Bottom Left</button>
			<button hlmBtn variant="outline" (click)="showBottomCenter()">Bottom Center</button>
			<button hlmBtn variant="outline" (click)="showBottomRight()">Bottom Right</button>
		</div>
	`,
})
export class SonnerPositionExample {
	showTopLeft() {
		toast('Event has been created', {
			position: 'top-left',
		});
	}

	showTopCenter() {
		toast('Event has been created', {
			position: 'top-center',
		});
	}

	showTopRight() {
		toast('Event has been created', {
			position: 'top-right',
		});
	}

	showBottomLeft() {
		toast('Event has been created', {
			position: 'bottom-left',
		});
	}

	showBottomCenter() {
		toast('Event has been created', {
			position: 'bottom-center',
		});
	}

	showBottomRight() {
		toast('Event has been created', {
			position: 'bottom-right',
		});
	}
}

Helm API

HlmToaster

Selector: hlm-toaster

Inputs

Prop	Type	Default	Description
invert	ToasterProps['invert']	false	-
theme	ToasterProps['theme']	light	-
position	ToasterProps['position']	bottom-right	-
hotKey	ToasterProps['hotkey']	[altKey, KeyT]	-
richColors	ToasterProps['richColors']	false	-
expand	ToasterProps['expand']	false	-
duration	ToasterProps['duration']	4000	-
visibleToasts	ToasterProps['visibleToasts']	3	-
closeButton	ToasterProps['closeButton']	false	-
toastOptions	ToasterProps['toastOptions']	{}	-
offset	ToasterProps['offset']	null	-
dir	ToasterProps['dir']	auto	-
class	ClassValue	-	-
style	Record<string, string>	{ --normal-bg: var(--popover), --normal-text: var(--popover-foreground), --normal-border: var(--border), --border-radius: var(--radius), }	-

Spinner

Slider

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.