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.

Kbd

Used to display textual user input from keyboard.

⌘⇧⌥⌃Ctrl+B

import { Component } from '@angular/core';
import { HlmKbdImports } from '@spartan-ng/helm/kbd';

@Component({
	selector: 'spartan-kbd-preview',
	imports: [HlmKbdImports],
	template: `
		<div class="flex flex-col items-center gap-4">
			<kbd hlmKbdGroup>
				<kbd hlmKbd>⌘</kbd>
				<kbd hlmKbd>⇧</kbd>
				<kbd hlmKbd>⌥</kbd>
				<kbd hlmKbd>⌃</kbd>
			</kbd>
			<kbd hlmKbdGroup>
				<kbd hlmKbd>Ctrl</kbd>
				<span>+</span>
				<kbd hlmKbd>B</kbd>
			</kbd>
		</div>
	`,
})
export class KbdPreview {}

Installation

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

Usage

import { HlmKbdImports } from '@spartan-ng/helm/kbd';

<kbd hlmKbd>⌘</kbd>

Examples

Group

Use the HlmKbdGroup component to group keyboard keys together.

Use Ctrl + BCtrl + K to open the command palette

import { Component } from '@angular/core';
import { HlmKbdImports } from '@spartan-ng/helm/kbd';

@Component({
	selector: 'spartan-kbd-group-preview',
	imports: [HlmKbdImports],
	template: `
		<div class="flex flex-col items-center gap-4">
			<p class="text-muted-foreground text-sm">
				Use
				<kbd hlmKbdGroup>
					<kbd hlmKbd>Ctrl + B</kbd>
					<kbd hlmKbd>Ctrl + K</kbd>
				</kbd>
				to open the command palette
			</p>
		</div>
	`,
})
export class KbdGroupPreview {}

Button

Use the HlmKbd component inside a HlmBtn to display a keyboard key inside a button.

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

@Component({
	selector: 'spartan-kbd-button-preview',
	imports: [HlmKbdImports, HlmButtonImports],
	template: `
		<div class="flex flex-wrap items-center gap-4">
			<button hlmBtn variant="outline" size="sm" class="pr-2">
				Accept
				<kbd hlmKbd>⏎</kbd>
			</button>
			<button hlmBtn variant="outline" size="sm" class="pr-2">
				Cancel
				<kbd hlmKbd>Esc</kbd>
			</button>
		</div>
	`,
})
export class KbdButtonPreview {}

Helm API

HlmKbdGroup

Selector: kbd[hlmKbdGroup]

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmKbd

Selector: kbd[hlmKbd]

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

Label

Item