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.
- Accordion
 - Alert
 - Alert Dialog
 - Aspect Ratio
 - Autocomplete
 - Avatar
 - Badge
 - Breadcrumb
 - Button
 - Button Group
 - Calendar
 - Card
 - Carousel
 - Checkbox
 - Collapsible
 - Combobox
 - Command
 - Context Menu
 - Data Table
 - Date Picker
 - Dialog
 - Dropdown Menu
 - Empty
 - Field
 - Form Field
 - Hover Card
 - Icon
 - Input Group
 - Input OTP
 - Input
 - Item
 - Kbd
 - Label
 - Menubar
 - Navigation Menu
 - Pagination
 - Popover
 - Progress
 - Radio Group
 - Resizable
 - Scroll Area
 - Select
 - Separator
 - Sheet
 - Sidebar
 - Skeleton
 - Slider
 - Sonner (Toast)
 - Spinner
 - Switch
 - Table
 - Tabs
 - Textarea
 - Toggle
 - Toggle Group
 - Tooltip
 
Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
import { Component } from '@angular/core';
import { BrnAlertDialogImports } from '@spartan-ng/brain/alert-dialog';
import { HlmAlertDialogImports } from '@spartan-ng/helm/alert-dialog';
import { HlmButton } from '@spartan-ng/helm/button';
@Component({
	selector: 'spartan-alert-dialog-preview',
	imports: [BrnAlertDialogImports, HlmAlertDialogImports, HlmButton],
	template: `
		<hlm-alert-dialog>
			<button id="edit-profile" variant="outline" brnAlertDialogTrigger hlmBtn>Show Dialog</button>
			<hlm-alert-dialog-content *brnAlertDialogContent="let ctx">
				<hlm-alert-dialog-header>
					<h2 hlmAlertDialogTitle>Are you absolutely sure?</h2>
					<p hlmAlertDialogDescription>
						This action cannot be undone. This will permanently delete your account and remove your data from our
						servers.
					</p>
				</hlm-alert-dialog-header>
				<hlm-alert-dialog-footer>
					<button hlmAlertDialogCancel (click)="ctx.close()">Cancel</button>
					<button hlmAlertDialogAction (click)="ctx.close()">Continue</button>
				</hlm-alert-dialog-footer>
			</hlm-alert-dialog-content>
		</hlm-alert-dialog>
	`,
})
export class AlertDialogPreview {}Installation
npx nx g @spartan-ng/cli:ui alert-dialog
ng g @spartan-ng/cli:ui alert-dialog
Usage
import { BrnAlertDialogImports } from '@spartan-ng/brain/alert-dialog';
import { HlmAlertDialogImports } from '@spartan-ng/helm/alert-dialog';<hlm-alert-dialog>
  <button id="edit-profile" variant="outline" brnAlertDialogTrigger hlmBtn>Show Dialog</button>
  <hlm-alert-dialog-content *brnAlertDialogContent="let ctx">
    <hlm-alert-dialog-header>
      <h2 hlmAlertDialogTitle>Are you absolutely sure?</h2>
      <p hlmAlertDialogDescription>
        This action cannot be undone. This will permanently delete your account and remove your data from our
        servers.
      </p>
    </hlm-alert-dialog-header>
    <hlm-alert-dialog-footer>
      <button hlmAlertDialogCancel (click)="ctx.close()">Cancel</button>
      <button hlmAlertDialogAction (click)="ctx.close()">Continue</button>
    </hlm-alert-dialog-footer>
  </hlm-alert-dialog-content>
</hlm-alert-dialog>Brain API
BrnAlertDialogContent
 Selector: [brnAlertDialogContent]
BrnAlertDialogDescription
 Selector: [brnAlertDialogDescription]
BrnAlertDialogOverlay
 Selector: brn-alert-dialog-overlay
BrnAlertDialogTitle
 Selector: [brnAlertDialogTitle]
BrnAlertDialogTrigger
 Selector: button[brnAlertDialogTrigger],button[brnAlertDialogTriggerFor]
Inputs
| Prop | Type | Default | Description | 
|---|---|---|---|
| brnAlertDialogTriggerFor | BrnAlertDialog | undefined | - | - | 
| type | 'button' | 'submit' | 'reset' | button | - | 
BrnAlertDialog
 Selector: brn-alert-dialog
 ExportAs: brnAlertDialog
Helm API
HlmAlertDialogActionButton
 Selector: button[hlmAlertDialogAction]
HlmAlertDialogCancelButton
 Selector: button[hlmAlertDialogCancel]
HlmAlertDialogContent
 Selector: hlm-alert-dialog-content
Inputs
| Prop | Type | Default | Description | 
|---|---|---|---|
| class | ClassValue | - | - | 
HlmAlertDialogDescription
 Selector: [hlmAlertDialogDescription]
Inputs
| Prop | Type | Default | Description | 
|---|---|---|---|
| class | ClassValue | - | - | 
HlmAlertDialogFooter
 Selector: hlm-alert-dialog-footer
Inputs
| Prop | Type | Default | Description | 
|---|---|---|---|
| class | ClassValue | - | - | 
HlmAlertDialogHeader
 Selector: hlm-alert-dialog-header
Inputs
| Prop | Type | Default | Description | 
|---|---|---|---|
| class | ClassValue | - | - | 
HlmAlertDialogOverlay
 Selector: [hlmAlertDialogOverlay],brn-alert-dialog-overlay[hlm]
Inputs
| Prop | Type | Default | Description | 
|---|---|---|---|
| class | ClassValue | - | - | 
HlmAlertDialogTitle
 Selector: [hlmAlertDialogTitle]
Inputs
| Prop | Type | Default | Description | 
|---|---|---|---|
| class | ClassValue | - | - | 
HlmAlertDialog
 Selector: hlm-alert-dialog
 ExportAs: hlmAlertDialog
On this page