Buttons

Interactive elements that trigger actions with consistent styling and behavior.

Button Variants

Default

Primary action button with high emphasis.Usage: Primary actions, Form submissions, Call-to-action buttons

<button hlmBtn>Default Button</button>

Secondary

Secondary action button with medium emphasis.Usage: Secondary actions, Alternative options, Supporting actions

<button hlmBtn variant="secondary">Secondary</button>

Outline

Outlined button with subtle emphasis.Usage: Less important actions, Cancel buttons, Tertiary actions

<button hlmBtn variant="outline">Outline</button>

Ghost

Minimal button with low visual weight.Usage: Navigation, Menu items, Subtle interactions

<button hlmBtn variant="ghost">Ghost</button>

Destructive

Destructive action button for dangerous operations.Usage: Delete actions, Irreversible operations, Warning actions

<button hlmBtn variant="destructive">Delete</button>

Link

Link-styled button for text-based actions.Usage: Inline links, Text navigation, Subtle call-to-actions

<button hlmBtn variant="link">Link Button</button>

Button Sizes

Size	Name	Description	Usage
`xsm`	Extra Small	Very compact button for dense interfaces	Table controls, Inline actions, Compact forms
`sm`	Small	Compact button for tight spaces	Form controls, Table actions, Secondary UI elements
`default`	Default	Standard button size for most use cases	Primary actions, Forms, General interactions
`lg`	Large	Prominent button for important actions	Hero sections, Key call-to-actions, Landing pages
`icon`	Icon	Square button designed for icon-only usage	Icon buttons, Tool toggles, Compact actions

Button States

State	Description	Notes
Default	Normal interactive state	Standard appearance
Hover	Mouse hover state	Automatic `hover:bg-primary/90`
Active	Pressed/clicked state	CSS `:active` state
Focus	Keyboard focus state	`focus-visible:ring-2`
Disabled	Non-interactive state	Use `disabled` attribute
Loading	Processing state	Show spinner icon

Icon Buttons

Buttons with Icons

<button hlmBtn variant="outline" size="sm">
  <ng-icon hlm name="lucideGitBranch" size="sm" class="mr-2" />
  New Branch
</button>

Icon-Only Buttons

<button hlmBtn variant="outline" size="sm" title="Settings">
  <ng-icon hlm name="lucideSettings" size="sm" />
</button>

Always include proper aria-labels or title attributes for icon-only buttons for accessibility.

Best Practices

Do

Use primary buttons for the most important action on a page - Limit primary buttons to one per page or section - Use consistent button sizes within the same context - Provide clear, action-oriented button labels - Include loading states for async operations - Ensure sufficient touch target size (44px minimum) - Ghost buttons automatically adapt text color for dark mode - Outline buttons use white borders and text in dark mode

Don't

Use multiple primary buttons in the same area - Make buttons too small for easy interaction - Use vague labels like “Click here” or “Submit” - Place destructive actions next to primary actions - Forget disabled states for invalid actions - Use buttons for navigation (use links instead)

Dark Mode Behavior

All button variants automatically adapt to dark mode using CSS custom properties and Tailwind’s dark mode utilities.

Light Mode
Dark Mode

Primary: Uses primary color (neutral-900) - Secondary: Uses secondary background - Outline: Gray border with default text - Ghost: Transparent background

Implementation

Template

<button hlmBtn variant="default" size="lg" (click)="handleClick()">
  <ng-icon hlm name="lucidePlus" size="sm" class="mr-2" />
  Add Item
</button>

Component

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

handleClick() {
  // Handle button action
}

Foundations

Components

Guidelines

Button Variants

Button Sizes

Button States

Icon Buttons

Buttons with Icons

Icon-Only Buttons

Best Practices

Do

Don't

Dark Mode Behavior

Implementation

Template

Component

​Button Variants

​Button Sizes

​Button States

​Icon Buttons

​Buttons with Icons

​Icon-Only Buttons

​Best Practices

Do

Don't

​Dark Mode Behavior

​Implementation

​Template

​Component

Button Variants

Button Sizes

Button States

Icon Buttons

Buttons with Icons

Icon-Only Buttons

Best Practices

Dark Mode Behavior

Implementation

Template

Component