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.

Button

Displays a callout for user attention.

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

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

Installation

npx nx g @spartan-ng/cli:ui button

Usage

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

<button hlmBtn>Button</button>

Examples

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 {}

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 {}

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 {}

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 {}

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 { lucideChevronRight } 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({ lucideChevronRight })],
	template: `
		<button hlmBtn size="icon" variant="secondary" class="size-8">
			<ng-icon hlm size="sm" name="lucideChevronRight" />
		</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';
import { HlmIconImports } from '@spartan-ng/helm/icon';

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

Loading

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

@Component({
	selector: 'spartan-button-loading',
	imports: [HlmButtonImports, NgIcon, HlmIconImports],
	providers: [provideIcons({ lucideLoaderCircle })],
	template: `
		<button disabled hlmBtn size="sm">
			<ng-icon hlm name="lucideLoaderCircle" size="sm" class="animate-spin" />
			Please wait
		</button>
	`,
})
export class ButtonLoading {}

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/goetzrobin/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
class	ClassValue	-	-
variant	ButtonVariants['variant']	this._config.variant	-
size	ButtonVariants['size']	this._config.size	-

Button Group

Breadcrumb