@payfit/unity-components
Version:
59 lines (58 loc) • 2.28 kB
TypeScript
import { ButtonProps } from '../../button/Button.js';
export type ActionBarButtonProps = Omit<ButtonProps, 'variant' | 'size' | 'color' | 'type'> & {
/**
* The visual variant of the button.
* @default 'secondary'
*/
variant?: 'primary' | 'secondary';
};
/**
* @deprecated Use ActionBarButtonProps instead
*/
export type ActionBarActionProps = ActionBarButtonProps;
/**
* The ActionBarButton component represents an individual button action within an ActionBar.
* It renders as a button with appropriate styling for the inverted ActionBar context.
* @param {ActionBarButtonProps} props - Props for the button. Identical to the `Button` component props.
* @example
* ```tsx
* import { ActionBarButton } from '@payfit/unity-components'
*
* function Example() {
* return (
* <ActionBarButton
* variant="primary"
* onPress={() => console.log('Button clicked')}
* prefixIcon="TrashOutlined"
* >
* Delete Items
* </ActionBarButton>
* )
* }
* ```
* @remarks
* - Automatically uses inverted button variants to work on dark ActionBar background
* - Secondary buttons use 'ghost-inverted' button variant
* - Primary buttons use 'inverted-primary' button variant
* @see {@link ActionBarButtonProps} 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 ActionBarButton: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "size" | "color" | "type" | "variant"> & {
/**
* The visual variant of the button.
* @default 'secondary'
*/
variant?: "primary" | "secondary";
} & import('react').RefAttributes<HTMLButtonElement>>;
/**
* @deprecated Use ActionBarButton instead
*/
declare const ActionBarAction: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "size" | "color" | "type" | "variant"> & {
/**
* The visual variant of the button.
* @default 'secondary'
*/
variant?: "primary" | "secondary";
} & import('react').RefAttributes<HTMLButtonElement>>;
export { ActionBarButton, ActionBarAction };