Skip to main content
Interactive elements that trigger actions with consistent styling and behavior.

​
Button Variants

Primary action button with high emphasis.Usage: Primary actions, Form submissions, Call-to-action buttons
<button hlmBtn>Default Button</button>
Secondary action button with medium emphasis.Usage: Secondary actions, Alternative options, Supporting actions
<button hlmBtn variant="secondary">Secondary</button>
Outlined button with subtle emphasis.Usage: Less important actions, Cancel buttons, Tertiary actions
<button hlmBtn variant="outline">Outline</button>
Minimal button with low visual weight.Usage: Navigation, Menu items, Subtle interactions
<button hlmBtn variant="ghost">Ghost</button>
Destructive action button for dangerous operations.Usage: Delete actions, Irreversible operations, Warning actions
<button hlmBtn variant="destructive">Delete</button>

​
Button Sizes

SizeNameDescriptionUsage
xsmExtra SmallVery compact button for dense interfacesTable controls, Inline actions, Compact forms
smSmallCompact button for tight spacesForm controls, Table actions, Secondary UI elements
defaultDefaultStandard button size for most use casesPrimary actions, Forms, General interactions
lgLargeProminent button for important actionsHero sections, Key call-to-actions, Landing pages
iconIconSquare button designed for icon-only usageIcon buttons, Tool toggles, Compact actions

​
Button States

StateDescriptionNotes
DefaultNormal interactive stateStandard appearance
HoverMouse hover stateAutomatic hover:bg-primary/90
ActivePressed/clicked stateCSS :active state
FocusKeyboard focus statefocus-visible:ring-2
DisabledNon-interactive stateUse disabled attribute
LoadingProcessing stateShow 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.
  • 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
}