Button

Displays a callout for user attention.

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideArrowUp } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';

@Component({
	selector: 'spartan-button-preview',
	imports: [HlmButtonImports, NgIcon],
	providers: [provideIcons({ lucideArrowUp })],
	host: { class: 'flex flex-wrap items-center gap-2 md:flex-row' },
	template: `
		<button hlmBtn variant="outline">Button</button>
		<button hlmBtn size="icon" variant="outline">
			<ng-icon name="lucideArrowUp" />
		</button>
	`,
})
export class ButtonPreview {}

Installation

ng g @spartan-ng/cli:ui button

Usage

import { HlmButtonImports } from '@spartan-ng/helm/button';

<button hlmBtn>Button</button>

Cursor

Tailwind v4 switched from cursor: pointer to cursor: default for the button component.
If you want to keep the cursor: pointer behavior, add the following code to your CSS file:

src/styles.css

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

Examples

Size

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideArrowUpRight } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';

@Component({
	selector: 'spartan-button-size-preview',
	imports: [HlmButtonImports, NgIcon],
	providers: [
		provideIcons({
			lucideArrowUpRight,
		}),
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'flex flex-col items-start gap-8 sm:flex-row',
	},
	template: `
		<div class="flex items-start gap-2">
			<button hlmBtn size="xs" variant="outline">Extra Small</button>
			<button hlmBtn size="icon-xs" aria-label="Submit" variant="outline">
				<ng-icon name="lucideArrowUpRight" />
			</button>
		</div>
		<div class="flex items-start gap-2">
			<button hlmBtn size="sm" variant="outline">Small</button>
			<button hlmBtn size="icon-sm" aria-label="Submit" variant="outline">
				<ng-icon name="lucideArrowUpRight" />
			</button>
		</div>
		<div class="flex items-start gap-2">
			<button hlmBtn variant="outline">Default</button>
			<button hlmBtn size="icon" aria-label="Submit" variant="outline">
				<ng-icon name="lucideArrowUpRight" />
			</button>
		</div>
		<div class="flex items-start gap-2">
			<button hlmBtn variant="outline" size="lg">Large</button>
			<button hlmBtn size="icon-lg" aria-label="Submit" variant="outline">
				<ng-icon name="lucideArrowUpRight" />
			</button>
		</div>
	`,
})
export class ButtonSizePreview {}

Default

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideArrowUp } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';

@Component({
	selector: 'spartan-button-preview',
	imports: [HlmButtonImports, NgIcon],
	providers: [provideIcons({ lucideArrowUp })],
	host: { class: 'flex flex-wrap items-center gap-2 md:flex-row' },
	template: `
		<button hlmBtn variant="outline">Button</button>
		<button hlmBtn size="icon" variant="outline">
			<ng-icon name="lucideArrowUp" />
		</button>
	`,
})
export class ButtonPreview {}

Outline

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

@Component({
	selector: 'spartan-button-outline',
	imports: [HlmButtonImports],
	template: `
		<button hlmBtn variant="outline">Outline</button>
	`,
})
export class ButtonOutline {}

Secondary

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

@Component({
	selector: 'spartan-button-secondary',
	imports: [HlmButtonImports],
	template: `
		<button hlmBtn variant="secondary">Secondary</button>
	`,
})
export class ButtonSecondary {}

Ghost

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

@Component({
	selector: 'spartan-button-ghost',
	imports: [HlmButtonImports],
	template: `
		<button hlmBtn variant="ghost">Ghost</button>
	`,
})
export class ButtonGhost {}

Destructive

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

@Component({
	selector: 'spartan-button-destructive',
	imports: [HlmButtonImports],
	template: `
		<button hlmBtn variant="destructive">Destructive</button>
	`,
})
export class ButtonDestructive {}

Link

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

@Component({
	selector: 'spartan-button-link',
	imports: [HlmButtonImports],
	template: `
		<button hlmBtn variant="link">Link</button>
	`,
})
export class ButtonLink {}

Icon

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideCircleFadingArrowUp } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmIconImports } from '@spartan-ng/helm/icon';

@Component({
	selector: 'spartan-button-icon',
	imports: [HlmButtonImports, NgIcon, HlmIconImports],
	providers: [provideIcons({ lucideCircleFadingArrowUp })],
	template: `
		<button hlmBtn size="icon" variant="outline">
			<ng-icon name="lucideCircleFadingArrowUp" />
		</button>
	`,
})
export class ButtonIcon {}

With Icon

Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideGitBranch } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmIconImports } from '@spartan-ng/helm/icon';

@Component({
	selector: 'spartan-button-with-icon',
	imports: [HlmButtonImports, NgIcon, HlmIconImports],
	providers: [provideIcons({ lucideGitBranch })],

	template: `
		<div class="flex flex-wrap items-center gap-2 md:flex-row">
			<button hlmBtn variant="outline" size="sm">
				<ng-icon name="lucideGitBranch" />
				New Branch
			</button>
		</div>
	`,
})
export class ButtonWithIcon {}

Rounded

Use the rounded-full class to make the button rounded.

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideArrowUp } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';

@Component({
	selector: 'spartan-button-rounded-preview',
	imports: [HlmButtonImports, NgIcon],
	providers: [
		provideIcons({
			lucideArrowUp,
		}),
	],
	template: `
		<button hlmBtn variant="outline" size="icon" class="rounded-full"><ng-icon name="lucideArrowUp" /></button>
	`,
})
export class ButtonRoundedPreview {}

Spinner

Render a hlm-spinner component inside the button to show a loading state. Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the spinner for the correct spacing.

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideLoaderCircle } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmSpinnerImports } from '@spartan-ng/helm/spinner';

@Component({
	selector: 'spartan-button-spinner',
	imports: [HlmButtonImports, HlmSpinnerImports],
	providers: [provideIcons({ lucideLoaderCircle })],
	host: {
		class: 'flex gap-2',
	},
	template: `
		<button hlmBtn variant="outline" disabled>
			<hlm-spinner data-icon="inline-start" />
			Generating
		</button>
		<button hlmBtn variant="secondary" disabled>
			Downloading
			<hlm-spinner data-icon="inline-start" />
		</button>
	`,
})
export class ButtonSpinner {}

As Anchor

Star on GitHub

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

@Component({
	selector: 'spartan-button-anchor',
	imports: [HlmButtonImports],
	template: `
		<a hlmBtn target="_blank" variant="link" href="https://github.com/spartan-ng/spartan">Star on GitHub</a>
	`,
})
export class ButtonAnchor {}

RTL

To enable RTL support in spartan-ng, see the RTL configuration guide.

import { Component, computed, inject } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideArrowRight, lucidePlus } from '@ng-icons/lucide';
import { TranslateService } from '@spartan-ng/app/app/shared/translate.service';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmSpinnerImports } from '@spartan-ng/helm/spinner';

@Component({
	selector: 'spartan-button-rtl-preview',
	imports: [HlmButtonImports, NgIcon, HlmSpinnerImports],
	providers: [
		provideIcons({
			lucideArrowRight,
			lucidePlus,
		}),
	],
	host: {
		class: 'flex flex-wrap items-center gap-2 md:flex-row',
		'[dir]': '_dir()',
	},
	template: `
		<button hlmBtn variant="outline">{{ _t().button }}</button>
		<button hlmBtn variant="destructive">{{ _t().delete }}</button>
		<button hlmBtn variant="outline">
			{{ _t().submit }}
			<ng-icon class="rtl:rotate-180" data-icon="inline-end" name="lucideArrowRight" />
		</button>
		<button hlmBtn variant="outline" size="icon" aria-label="Add">
			<ng-icon name="lucidePlus" />
		</button>
		<button hlmBtn variant="secondary" disabled>
			<hlm-spinner data-icon="inline-start" />
			{{ _t().loading }}
		</button>
	`,
})
export class ButtonRtlPreview {
	private readonly _language = inject(TranslateService).language;
	private readonly _translations = {
		en: {
			dir: 'ltr',
			values: {
				button: 'Button',
				submit: 'Submit',
				delete: 'Delete',
				loading: 'Loading',
			},
		},
		ar: {
			dir: 'rtl',
			values: {
				button: 'زر',
				submit: 'إرسال',
				delete: 'حذف',
				loading: 'جاري التحميل',
			},
		},
		he: {
			dir: 'rtl',
			values: {
				button: 'כפתור',
				submit: 'שלח',
				delete: 'מחק',
				loading: 'טוען',
			},
		},
	};
	private readonly _translation = computed(() => this._translations[this._language()]);
	protected readonly _t = computed(() => this._translation().values);
	protected readonly _dir = computed(() => this._translation().dir);
}

Styles

This is currently work in progress.

We will provide this feature when we adjust the styles for all components. All Components will be shipped with the Vega style!

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideCircleFadingArrowUp } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';

@Component({
	selector: 'spartan-button-style',
	imports: [HlmButtonImports, NgIcon],
	providers: [provideIcons({ lucideCircleFadingArrowUp })],

	template: `
		<div class="flex flex-wrap items-center justify-center gap-2 md:flex-row">
			<button hlmBtn>Button</button>
			<button hlmBtn variant="secondary">Secondary</button>
			<button hlmBtn variant="ghost">Ghost</button>
			<button hlmBtn variant="outline">Outline</button>
			<button hlmBtn variant="link">Link</button>
			<button hlmBtn variant="destructive">Destructive</button>
		</div>

		<div class="mt-2 flex flex-wrap items-center justify-center gap-2 md:flex-row">
			<button hlmBtn size="icon">
				<ng-icon name="lucideCircleFadingArrowUp" />
			</button>
			<button hlmBtn size="icon" variant="secondary">
				<ng-icon name="lucideCircleFadingArrowUp" />
			</button>
			<button hlmBtn size="icon" variant="ghost">
				<ng-icon name="lucideCircleFadingArrowUp" />
			</button>
			<button hlmBtn size="icon" variant="outline">
				<ng-icon name="lucideCircleFadingArrowUp" />
			</button>
			<button hlmBtn size="icon" variant="link">
				<ng-icon name="lucideCircleFadingArrowUp" />
			</button>
			<button hlmBtn size="icon" variant="destructive">
				<ng-icon name="lucideCircleFadingArrowUp" />
			</button>
		</div>
	`,
})
export class ButtonStyleExample {}

Brain API

BrnButton

Selector: a[brnButton], button[brnButton]

Inputs

Prop	Type	Default	Description
disabled	boolean	false	-

Helm API

HlmButton

Selector: button[hlmBtn], a[hlmBtn]

ExportAs: hlmBtn

Inputs

Prop	Type	Default	Description
variant	ButtonVariants['variant']	this._config.variant	-
size	ButtonVariants['size']	this._config.size	-

Button Group

Breadcrumb

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.