@payfit/unity-components
Version:
45 lines (44 loc) • 1.97 kB
TypeScript
import { UnityIcon } from '@payfit/unity-icons';
import { AriaRole, ButtonHTMLAttributes } from 'react';
import { ButtonProps as AriaButtonProps } from 'react-aria-components/Button';
import { IconButtonBase, IconButtonFilled, IconButtonGhost, IconButtonOutlined } from './IconButton.variants.js';
type IconButtonBaseProps = AriaButtonProps & IconButtonBase & {
/** Label used to describe the action of the button */
label: string;
/** The icon to display inside the button */
icon: UnityIcon;
/**
* Press handler. Fires for mouse, touch, and keyboard activation.
* Prefer this over `onClick` for consistency with `Button`.
*/
onPress?: AriaButtonProps['onPress'];
/**
* The function to trigger when the button is clicked.
* Kept for backward compatibility — `onPress` takes precedence when both are provided.
*/
onClick?: () => void;
/** Override the icon role */
iconRole?: AriaRole;
/** The button's appearance. */
variant: 'primary' | 'secondary' | 'ghost' | 'outlined';
/** The button's color. */
color?: IconButtonFilled['color'] | IconButtonOutlined['color'] | IconButtonGhost['color'];
/** The loading state of the button. */
isLoading?: boolean;
/** The button type */
type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
id?: ButtonHTMLAttributes<HTMLButtonElement>['id'];
className?: string;
};
type IconButtonUnionProps = (IconButtonBaseProps & {
variant: 'primary';
} & IconButtonFilled) | (IconButtonBaseProps & {
variant: 'secondary';
} & IconButtonOutlined) | (IconButtonBaseProps & {
variant: 'ghost';
} & IconButtonGhost) | (IconButtonBaseProps & {
variant: 'outlined';
} & IconButtonOutlined);
export type IconButtonProps = Omit<IconButtonUnionProps, 'style'>;
export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
export {};