@payfit/unity-components
Version:
56 lines (55 loc) • 2.61 kB
TypeScript
import { UnityIcon } from '@payfit/unity-icons';
import { AriaRole } from 'react';
import { ButtonProps as AriaButtonProps } from 'react-aria-components/Button';
import { LinkProps as AriaLinkProps } from 'react-aria-components/Link';
import { IconButtonBase, IconButtonFilled, IconButtonGhost, IconButtonOutlined } from './IconButton.variants.js';
type IconButtonBaseProps = 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;
className?: string;
};
type IconButtonUnionProps = (IconButtonBaseProps & {
variant: 'primary';
} & IconButtonFilled) | (IconButtonBaseProps & {
variant: 'secondary';
} & IconButtonOutlined) | (IconButtonBaseProps & {
variant: 'ghost';
} & IconButtonGhost) | (IconButtonBaseProps & {
variant: 'outlined';
} & IconButtonOutlined);
type IconButtonButtonElementProps = Omit<AriaButtonProps, 'children' | 'className' | 'href' | 'onClick' | 'onPress' | 'style'> & {
/** The DOM element rendered by the component. */
as?: 'button';
};
type IconButtonLinkElementProps = Omit<AriaLinkProps, 'children' | 'className' | 'href' | 'onClick' | 'onPress' | 'style'> & {
/** The DOM element rendered by the component. */
as: 'link';
/** The URL the link navigates to. */
href: HTMLAnchorElement['href'];
};
type IconButtonVisualProps = Omit<IconButtonUnionProps, 'style'>;
export type IconButtonButtonProps = IconButtonVisualProps & IconButtonButtonElementProps;
export type IconButtonLinkProps = IconButtonVisualProps & IconButtonLinkElementProps;
export type IconButtonProps = IconButtonButtonProps | IconButtonLinkProps;
export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
export {};