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 })],
	template: `
		<div class="flex flex-wrap items-center gap-2 md:flex-row">
			<button hlmBtn variant="outline">Button</button>
			<button hlmBtn variant="outline" size="icon" aria-label="Submit">
				<ng-icon name="lucideArrowUp" />
			</button>
		</div>
	`,
})
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 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 { 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',
	imports: [HlmButtonImports, NgIcon],
	providers: [provideIcons({ lucideArrowUpRight })],
	template: `
		<div class="flex flex-col items-start gap-8 sm:flex-row">
			<div class="flex items-start gap-2">
				<button hlmBtn size="xs" variant="outline">Extra Small</button>
				<button hlmBtn size="icon-xs" variant="outline" aria-label="Submit">
					<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" variant="outline" aria-label="Submit">
					<ng-icon name="lucideArrowUpRight" />
				</button>
			</div>
			<div class="flex items-start gap-2">
				<button hlmBtn variant="outline">Default</button>
				<button hlmBtn size="icon" variant="outline" aria-label="Submit">
					<ng-icon name="lucideArrowUpRight" />
				</button>
			</div>
			<div class="flex items-start gap-2">
				<button hlmBtn size="lg" variant="outline">Large</button>
				<button hlmBtn size="icon-lg" variant="outline" aria-label="Submit">
					<ng-icon name="lucideArrowUpRight" />
				</button>
			</div>
		</div>
	`,
})
export class ButtonSize {}

Default

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

@Component({
	selector: 'spartan-button-default',
	imports: [HlmButtonImports],
	template: `
		<button hlmBtn>Button</button>
	`,
})
export class ButtonDefault {}

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';

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

With Icon

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';

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

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',
	imports: [HlmButtonImports, NgIcon],
	providers: [provideIcons({ lucideArrowUp })],
	template: `
		<button hlmBtn variant="outline" size="icon" class="rounded-full">
			<ng-icon name="lucideArrowUp" />
		</button>
	`,
})
export class ButtonRounded {}

Spinner

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 })],
	template: `
		<div class="flex gap-2">
			<button hlmBtn variant="outline" disabled>
				<hlm-spinner />
				Generating
			</button>

			<button hlmBtn variant="secondary" disabled>
				Downloading
				<hlm-spinner />
			</button>
		</div>
	`,
})
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 {}

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.