Skip to content

Pending Review

Pending Review from User Experience (UX)

Button Component

Overview

The PWC Button component provides a flexible, accessible button solution for user interactions across the design system. Built with Lit web components, it supports multiple variants, sizes, and states while maintaining consistent behavior and styling.

Core Capabilities

  • Multiple Variants - Seven semantic variants including primary, critical, success, warning, tip, outline, and clear styles

  • Size Options - Three sizes (m, s, xs) to fit different interface contexts and hierarchy needs

  • Icon Integration - Built-in icon support with automatic sizing and color coordination

  • Loading States - Busy state with spinner animation for async operations and form submissions

  • Form Integration - Native form support with submit handling and validation state awareness

  • Accessibility Focus - Full keyboard navigation support with focus management and screen reader compatibility

When to use Button:

  • Primary actions that require user interaction and clear visual prominence

  • Form submissions, confirmations, and critical workflow actions

  • Navigation triggers and modal dialog controls

  • Icon buttons for compact interfaces and toolbar actions

When not to use Button:

  • Text links within content that should use Link component instead

  • Navigation between pages where anchor tags provide better semantics

  • Decorative elements that don't trigger actions or user interactions

Basic Implementation

import React, { useCallback } from 'react';
import { PwcButton } from "@progress-i360/pwc-react";

function MyComponent() {
  const handleSave = useCallback(() => {
    console.log('Saving data...');
  }, []);

  return (
      <div>
        <PwcButton
          variant="primary"
          label="Save"
          icon="save"
          onPwcClick={handleSave}
        />

        <PwcButton
          variant="outline"
          label="Cancel"
          size="s"
        />
      </div>
  );
}

import { useCallback, useState } from 'react';
import '@progress-i360/progress-web-components/button';

function ButtonActions() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [deleteCount, setDeleteCount] = useState(0);

  const handleSubmit = useCallback(async () => {
    if (isSubmitting) {
      return;
    }

    setIsSubmitting(true);
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log('Submitted data');
    setIsSubmitting(false);
  }, [isSubmitting]);

  const handleDelete = useCallback(() => {
    setDeleteCount(count => count + 1);
    console.log('Deleted item');
  }, []);

  return (
    <div style={{ display: 'flex', gap: '12px' }}>
      <pwc-button
        variant="success"
        label={isSubmitting ? 'Submitting...' : 'Submit'}
        busy={isSubmitting ? 'true' : undefined}
        onPwcClick={handleSubmit}
      ></pwc-button>

      <pwc-button
        variant="critical"
        label={`Delete (${deleteCount})`}
        icon="trash"
        onPwcClick={handleDelete}
      ></pwc-button>
    </div>
  );
}

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@progress-i360/progress-web-components/button";
import "@progress-i360/progress-web-components/flex";
import "@progress-i360/progress-web-components/heading";
import "@progress-i360/progress-web-components/body";

@Component({
  selector: 'button-demo',
  template: `
    <pwc-flex direction="column" gap="m" padding="m">
      <pwc-heading content="Interactive Buttons Demo" size="l"></pwc-heading>
      <pwc-flex gap="s" wrap="wrap" align-items="center">
        <pwc-button [label]="buttonLabel" [variant]="currentVariant" [busy]="isLoading" (pwc-click)="handlePrimaryAction()"></pwc-button>
        <pwc-button label="Toggle Loading" variant="outline" (pwc-click)="toggleLoading()"></pwc-button>
        <pwc-button [icon]="currentIcon" [size]="iconSize" variant="clear" (pwc-click)="changeIcon()"></pwc-button>
      </pwc-flex>
      <pwc-flex gap="s" wrap="wrap">
        <pwc-button label="Primary" variant="primary" (pwc-click)="setVariant('primary')"></pwc-button>
        <pwc-button label="Success" variant="success" (pwc-click)="setVariant('success')"></pwc-button>
        <pwc-button label="Warning" variant="warning" (pwc-click)="setVariant('warning')"></pwc-button>
        <pwc-button label="Critical" variant="critical" (pwc-click)="setVariant('critical')"></pwc-button>
      </pwc-flex>
      <pwc-body [content]="'Clicked ' + clickCount + ' times. Current variant: ' + currentVariant" color="subtle" size="xs"></pwc-body>
    </pwc-flex>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ButtonDemo {
  buttonLabel = 'Save Changes';
  currentVariant = 'primary';
  isLoading = false;
  currentIcon = 'settings';
  iconSize = 'm';
  clickCount = 0;

  icons = ['settings', 'edit', 'save', 'delete', 'refresh'];

  handlePrimaryAction() {
    this.clickCount++;
    this.buttonLabel = `Saved (${this.clickCount})`;
  }

  toggleLoading() {
    this.isLoading = !this.isLoading;
  }

  changeIcon() {
    const currentIndex = this.icons.indexOf(this.currentIcon);
    this.currentIcon = this.icons[(currentIndex + 1) % this.icons.length];
  }

  setVariant(variant: string) {
    this.currentVariant = variant;
  }
}

import '@progress-i360/progress-web-components/button';

const button = document.createElement('pwc-button');
button.setAttribute('variant', 'primary');
button.setAttribute('label', 'Save Changes');
button.setAttribute('icon', 'save');

button.addEventListener('pwc-click', () => {
  console.log('Button clicked!');
});

document.body.appendChild(button);

Usage Patterns

  • Primary Actions - Use primary variant for main call-to-action buttons like "Save", "Submit", or "Create New"

  • Secondary Actions - Use outline or clear variants for supporting actions like "Cancel", "Back", or "View Details"

  • Contextual Actions - Use semantic variants (success, warning, critical) to communicate action impact and importance

  • Icon Buttons - Use icon-only buttons for compact interfaces, toolbars, and repeated actions with clear iconography

Best Practices

Content Strategy Guidelines

  • Clear Labels - Use concise, action-oriented language that describes what will happen

  • Consistent Terminology - Maintain consistent button labels across similar actions throughout the application

  • Icon Clarity - Choose recognizable icons that reinforce the button's purpose and action

  • Loading Feedback - Implement busy states for actions that take time to complete

Performance Optimization

  • Event Delegation - Use event delegation for multiple buttons to reduce memory overhead

  • Conditional Rendering - Only render buttons that are relevant to the current user state

  • Icon Optimization - Leverage icon sprite sheets or SVG systems for efficient icon loading

  • State Management - Minimize unnecessary re-renders by managing button state efficiently

Integration Architecture

  • Form Integration - Leverage built-in form context for submit buttons and validation states

  • Accessibility Standards - Ensure proper ARIA attributes and keyboard navigation support

  • Theme Consistency - Use design system tokens for consistent spacing, colors, and typography

  • Component Composition - Combine with other form components for cohesive user experiences

Common Use Cases

Form Actions

  • Primary submit buttons for data entry and configuration forms

  • Cancel and reset buttons for form state management

  • Multi-step form navigation with next/previous actions

Data Operations

  • CRUD operation buttons for create, read, update, delete actions

  • Bulk action buttons for selected items and batch operations

  • Export and import buttons for data transfer functionality

Interface Controls

  • Modal dialog actions for confirmation and dismissal

  • Toolbar buttons for editing, formatting, and view controls

  • Navigation buttons for pagination and content browsing

Troubleshooting

Common Issues

Actions Not Triggering

Symptoms: Button clicks don't execute expected functionality

Solutions:

  • Verify event listeners are properly attached to pwc-click events

  • Check if button is disabled or in busy state preventing interactions

  • Ensure form context is properly configured for submit buttons

Actions Not Visible

Symptoms: Buttons don't appear or are positioned incorrectly

Solutions:

  • Confirm button component is imported and registered correctly

  • Check CSS display properties and container overflow settings

  • Verify z-index stacking for modals and overlays

Layout Issues

Symptoms: Button sizing or spacing appears incorrect

Solutions:

  • Use appropriate size prop (m, s, xs) for the interface context

  • Check parent container styling affecting button dimensions

  • Ensure proper gap spacing between multiple buttons

Icon Problems

Symptoms: Icons don't display or appear with wrong colors

Solutions:

  • Verify icon key exists in the design system icon library

  • Check icon color coordination with button variant styling

  • Ensure icon sizing matches button size configuration

Implementation Support

  • Technical Architecture - Component integration patterns and performance optimization strategies

  • Design System Integration - Token usage, theming, and consistent styling implementation

  • Accessibility Compliance - WCAG guidelines adherence and assistive technology compatibility

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools: 📖 View Complete API Documentation in Storybook →

This guide provides high-level implementation guidance. For detailed API specifications and interactive examples, visit our Storybook documentation.