Button Components

/**
 * Standard button with default styling
 * @param props - Button properties
 * @returns JSX element for default button
 */
function DefaultButton(props: IButtonProps): JSX.Element;

import { DefaultButton } from "@fluentui/react";

// Basic default button
<DefaultButton text="Cancel" onClick={() => console.log('Cancelled')} />

// Button with icon
<DefaultButton
  text="Delete"
  iconProps={{ iconName: 'Delete' }}
  onClick={handleDelete}
/>

// Disabled button
<DefaultButton text="Submit" disabled={true} />

/**
 * Primary action button with emphasized styling
 * @param props - Button properties
 * @returns JSX element for primary button
 */
function PrimaryButton(props: IButtonProps): JSX.Element;

import { PrimaryButton } from "@fluentui/react";

// Primary button for main actions
<PrimaryButton text="Save" onClick={handleSave} />

// Primary button with loading state
<PrimaryButton
  text={isLoading ? "Saving..." : "Save"}
  disabled={isLoading}
  onClick={handleSave}
/>

/**
 * Lightweight button without background for subtle actions
 * @param props - Button properties
 * @returns JSX element for action button
 */
function ActionButton(props: IButtonProps): JSX.Element;

// Alias for ActionButton
function CommandButton(props: IButtonProps): JSX.Element;

import { ActionButton } from "@fluentui/react";

// Action button with icon and text
<ActionButton
  iconProps={{ iconName: 'Add' }}
  text="Add item"
  onClick={handleAdd}
/>

// Action button as menu trigger
<ActionButton
  iconProps={{ iconName: 'More' }}
  text="More options"
  menuProps={{
    items: [
      { key: 'edit', text: 'Edit', onClick: handleEdit },
      { key: 'delete', text: 'Delete', onClick: handleDelete }
    ]
  }}
/>

/**
 * Two-line button with primary and secondary text
 * @param props - Compound button properties
 * @returns JSX element for compound button
 */
function CompoundButton(props: IButtonProps): JSX.Element;

import { CompoundButton } from "@fluentui/react";

// Compound button with description
<CompoundButton
  primary={true}
  text="Create new project"
  secondaryText="Start with a blank template or choose from existing options"
  onClick={handleCreateProject}
/>

// Compound button with icon
<CompoundButton
  iconProps={{ iconName: 'Upload' }}
  text="Upload files"
  secondaryText="Select multiple files from your computer"
  onClick={handleUpload}
/>

/**
 * Button containing only an icon for compact interfaces
 * @param props - Icon button properties
 * @returns JSX element for icon button
 */
function IconButton(props: IButtonProps): JSX.Element;

import { IconButton } from "@fluentui/react";

// Basic icon button
<IconButton
  iconProps={{ iconName: 'Edit' }}
  title="Edit"
  ariaLabel="Edit item"
  onClick={handleEdit}
/>

// Icon button with menu
<IconButton
  iconProps={{ iconName: 'MoreVertical' }}
  title="More actions"
  ariaLabel="More actions"
  menuProps={{
    items: [
      { key: 'share', text: 'Share', iconProps: { iconName: 'Share' } },
      { key: 'copy', text: 'Copy', iconProps: { iconName: 'Copy' } }
    ]
  }}
/>

/**
 * Button optimized for command bars
 * @param props - Command bar button properties
 * @returns JSX element for command bar button
 */
function CommandBarButton(props: IButtonProps): JSX.Element;

import { CommandBarButton } from "@fluentui/react";

// Command bar button
<CommandBarButton
  iconProps={{ iconName: 'New' }}
  text="New"
  onClick={handleNew}
/>

// Command bar button with submenu
<CommandBarButton
  iconProps={{ iconName: 'Share' }}
  text="Share"
  subMenuProps={{
    items: [
      { key: 'email', text: 'Email', iconProps: { iconName: 'Mail' } },
      { key: 'link', text: 'Copy link', iconProps: { iconName: 'Link' } }
    ]
  }}
/>

/**
 * Button styled for use within message bars
 * @param props - Message bar button properties
 * @returns JSX element for message bar button
 */
function MessageBarButton(props: IButtonProps): JSX.Element;

/**
 * Get CSS class names for split button styling
 * @param theme - Current theme
 * @param className - Additional CSS class
 * @param disabled - Whether button is disabled
 * @returns Object with CSS class names
 */
function getSplitButtonClassNames(
  theme: ITheme,
  className?: string,
  disabled?: boolean
): ISplitButtonClassNames;

interface ISplitButtonClassNames {
  root?: string;
  primaryButton?: string;
  secondaryButton?: string;
  label?: string;
  icon?: string;
  menuIcon?: string;
}

// Button properties interface
interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Primary text of the button */
  text?: string;
  /** Secondary text for compound buttons */
  secondaryText?: string;
  /** Icon properties */
  iconProps?: IIconProps;
  /** Whether this is a primary button */
  primary?: boolean;
  /** Link URL for button */
  href?: string;
  /** Disabled state */
  disabled?: boolean;
  /** Click handler */
  onClick?: (event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
  /** Menu properties for dropdown */
  menuProps?: IContextualMenuProps;
  /** Submenu properties */
  subMenuProps?: IContextualMenuProps;
  /** Custom styles */
  styles?: IButtonStyles;
  /** Theme override */
  theme?: ITheme;
  /** Allow disabled focus */
  allowDisabledFocus?: boolean;
  /** Checked state for toggle buttons */
  checked?: boolean;
  /** Split button configuration */
  split?: boolean;
  /** Menu trigger on hover */
  menuTriggerKeyCode?: KeyCodes;
  /** Accessibility label */
  ariaLabel?: string;
  /** Description for assistive technology */
  ariaDescription?: string;
  /** ARIA expanded state */
  ariaExpanded?: boolean;
  /** Keytip configuration */
  keytipProps?: IKeytipProps;
  /** Persist menu on click */
  persistMenu?: boolean;
  /** Toggle behavior */
  toggle?: boolean;
}

// Icon properties
interface IIconProps {
  /** Icon name from icon font */
  iconName?: string;
  /** Custom icon component */
  iconType?: IconType;
  /** Image source for image icons */
  imageProps?: IImageProps;
  /** Custom styles for icon */
  styles?: IIconStyles;
  /** Class name for icon */
  className?: string;
  /** Image error callback */
  imageErrorAs?: React.ComponentType<IImageProps>;
}

// Button styles interface
interface IButtonStyles {
  /** Style for root element */
  root?: IStyle;
  /** Style when button is hovered */
  rootHovered?: IStyle;
  /** Style when button is pressed */
  rootPressed?: IStyle;
  /** Style when button is checked/selected */
  rootChecked?: IStyle;
  /** Style when button is checked and hovered */
  rootCheckedHovered?: IStyle;
  /** Style when button is checked and pressed */
  rootCheckedPressed?: IStyle;
  /** Style when button is disabled */
  rootDisabled?: IStyle;
  /** Style when button is expanded (menu open) */
  rootExpanded?: IStyle;
  /** Style when button has focus */
  rootFocused?: IStyle;
  /** Style for button text label */
  label?: IStyle;
  /** Style for button icon */
  icon?: IStyle;
  /** Style for menu icon */
  menuIcon?: IStyle;
  /** Style for secondary text */
  description?: IStyle;
  /** Style for split button divider */
  splitButtonDivider?: IStyle;
  /** Style for split button menu button */
  splitButtonMenuButton?: IStyle;
  /** Style for split button container */
  splitButtonContainer?: IStyle;
  /** Style for flex container */
  flexContainer?: IStyle;
  /** Style for text container */
  textContainer?: IStyle;
}

// Button type enumeration
enum ButtonType {
  normal = 0,
  primary = 1,
  hero = 2,
  compound = 3,
  command = 4,
  icon = 5,
  default = 6,
}

// Element type for button rendering
enum ElementType {
  /** Render as button element */
  button = 0,
  /** Render as anchor element */
  anchor = 1,
}

import React, { useState } from "react";
import { 
  PrimaryButton, 
  DefaultButton, 
  ActionButton, 
  CompoundButton,
  Stack,
  IButtonStyles,
  ITheme,
  useTheme
} from "@fluentui/react";

function ButtonExample() {
  const [isLoading, setIsLoading] = useState(false);
  const theme = useTheme();

  // Custom button styles
  const customButtonStyles: IButtonStyles = {
    root: {
      backgroundColor: theme.palette.themePrimary,
      borderRadius: '20px',
    },
    rootHovered: {
      backgroundColor: theme.palette.themeDarkAlt,
    }
  };

  const handleAsyncAction = async () => {
    setIsLoading(true);
    try {
      await new Promise(resolve => setTimeout(resolve, 2000));
      console.log('Action completed');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <Stack tokens={{ childrenGap: 15 }}>
      {/* Custom styled button */}
      <PrimaryButton
        text="Custom Style"
        styles={customButtonStyles}
        onClick={() => console.log('Custom button clicked')}
      />

      {/* Button with loading state */}
      <PrimaryButton
        text={isLoading ? "Processing..." : "Start Process"}
        disabled={isLoading}
        onClick={handleAsyncAction}
      />

      {/* Split button example */}
      <DefaultButton
        text="Save"
        split={true}
        onClick={() => console.log('Save clicked')}
        menuProps={{
          items: [
            { key: 'save', text: 'Save', onClick: () => console.log('Save') },
            { key: 'saveAs', text: 'Save As...', onClick: () => console.log('Save As') },
            { key: 'export', text: 'Export', onClick: () => console.log('Export') }
          ]
        }}
      />

      {/* Compound button with complex action */}
      <CompoundButton
        primary={true}
        text="Deploy Application"
        secondaryText="Build and deploy to production environment"
        iconProps={{ iconName: 'Deploy' }}
        onClick={() => console.log('Deploy clicked')}
      />
    </Stack>
  );
}