Skip to main content

​
Overview

The Button component is a fundamental interactive element that triggers actions when clicked. It supports multiple visual variants, sizes, icons, loading states, and accessibility features.

​
Import

import { MagaryButton } from 'ng-magary';

​
Basic Usage

import { Component } from '@angular/core';
import { MagaryButton } from 'ng-magary';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [MagaryButton],
  template: `
    <magary-button 
      label="Click me"
      (onClick)="handleClick($event)"
    />
  `
})
export class DemoComponent {
  handleClick(event: Event) {
    console.log('Button clicked!', event);
  }
}

​
Properties

​
Inputs

​
label
string
default:"undefined"
Text label displayed on the button
​
icon
string
default:"undefined"
Lucide icon name to display (e.g., ‘home’, ‘user’, ‘settings’)
​
severity
ButtonSeverity
default:"undefined"
Visual style variant of the buttonOptions: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'help' | 'premium'
​
variant
ButtonVariant
default:"'solid'"
Display variant of the buttonOptions: 'solid' | 'text' | 'outlined'
​
size
ButtonSize
default:"'normal'"
Size of the buttonOptions: 'small' | 'normal' | 'large'
​
iconPos
IconPosition
default:"'left'"
Position of the icon relative to the labelOptions: 'left' | 'right'
​
disabled
boolean
default:"false"
When true, button is disabled and cannot be clicked
​
loading
boolean
default:"false"
When true, button shows loading state and is disabled
​
rounded
boolean
default:"false"
When true, button has fully rounded corners (22px border-radius)
​
shadow
ShadowLevel
default:"0"
Shadow elevation level (0-7)Options: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7
​
iconSize
number
default:"undefined"
Custom size for the icon in pixels
​
customBackgroundColor
string
default:"undefined"
Custom background color (CSS color value)
​
width
string
default:"'auto'"
Custom width (CSS value, e.g., ‘200px’, ‘100%’)
​
height
string
default:"'auto'"
Custom height (CSS value)
​
ariaLabel
string
default:"undefined"
Custom ARIA label for accessibility. Falls back to label or icon name if not provided

​
Outputs

​
onClick
EventEmitter<Event>
Emitted when the button is clicked (while not disabled or loading)
​
buttonClick
EventEmitter<Event>
Alternative click event (same as onClick)

​
Examples

​
Severity Variants

<magary-button label="Primary" severity="primary" />

​
Display Variants

<magary-button label="Solid" variant="solid" severity="primary" />

​
With Icons

<magary-button 
  label="Save" 
  icon="save" 
  iconPos="left"
  severity="primary"
/>

​
States

<magary-button 
  label="Saving..." 
  [loading]="true"
  severity="primary"
/>

​
Sizes

<magary-button label="Small" size="small" severity="primary" />

​
Custom Styling

<magary-button 
  label="Custom"
  customBackgroundColor="#6366f1"
  width="200px"
  height="50px"
  [shadow]="3"
  [rounded]="true"
/>

​
Accessibility

The Button component includes comprehensive accessibility features:
  • ARIA Labels: Automatically generates aria-label from label text or icon name
  • Disabled State: Properly communicates disabled state to assistive technologies
  • Keyboard Support: Fully accessible via keyboard (Enter/Space)
  • Focus Management: Visual focus indicators for keyboard navigation

​
ARIA Label Resolution

  1. Uses custom ariaLabel if provided
  2. Falls back to label text if available
  3. Generates descriptive label from icon name (e.g., “settings button”)
  4. Defaults to “Button” if nothing else is available

​
Component Details

  • Selector: magary-button
  • Source: /home/daytona/workspace/source/projects/ng-magary/src/lib/Button/button/button.ts
  • Standalone: Yes
  • Change Detection: OnPush

​
Type Definitions

type ButtonSeverity = 
  | 'primary' 
  | 'secondary' 
  | 'success' 
  | 'info' 
  | 'warning' 
  | 'danger' 
  | 'help' 
  | 'premium';

type ButtonVariant = 'solid' | 'text' | 'outlined';

type ButtonSize = 'small' | 'normal' | 'large';

type IconPosition = 'left' | 'right';

type ShadowLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;

Build docs developers (and LLMs) love

Get started for freeTalk to us