@payfit/unity-components
Version:
62 lines (61 loc) • 2.26 kB
TypeScript
import { UnityIcon } from '@payfit/unity-icons';
import { IconButtonProps } from '../../icon-button/IconButton.js';
export interface ActionBarIconButtonProps {
/**
* The icon to display inside the button.
*/
icon: UnityIcon;
/**
* The label for accessibility. This is used as the aria-label and shown in a tooltip.
*/
label: string;
/**
* The visual variant of the button.
* @default 'secondary'
*/
variant?: 'primary' | 'secondary';
/**
* Callback fired when the button is pressed.
*/
onPress?: IconButtonProps['onPress'];
/**
* Whether the button is disabled.
* @default false
*/
isDisabled?: boolean;
/**
* Whether the button is in a loading state.
* @default false
*/
isLoading?: boolean;
}
/**
* The ActionBarIconButton component represents an icon-only button action within an ActionBar.
* It renders as an icon button with appropriate styling for the inverted ActionBar context.
* @param {ActionBarIconButtonProps} props - Props for the icon button.
* @example
* ```tsx
* import { ActionBarIconButton } from '@payfit/unity-components'
*
* function Example() {
* return (
* <ActionBarIconButton
* icon="TrashOutlined"
* label="Delete items"
* variant="primary"
* onPress={() => console.log('Delete clicked')}
* />
* )
* }
* ```
* @remarks
* - Automatically uses inverted icon button variants to work on dark ActionBar background
* - The label prop is required for accessibility and is shown in a tooltip on hover
* - Secondary icon buttons are hidden on mobile viewports (overflow menu handles them)
* - Primary icon buttons remain visible on all screen sizes
* @see {@link ActionBarIconButtonProps} for all available props
* @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/action-bar GitHub}
* @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
*/
declare const ActionBarIconButton: import('react').ForwardRefExoticComponent<ActionBarIconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
export { ActionBarIconButton };