@payfit/unity-components
Version:
58 lines (57 loc) • 2.18 kB
TypeScript
import { UnityIcon } from '@payfit/unity-icons';
import { PropsWithChildren } from 'react';
import { ButtonProps as AriaButtonProps } from 'react-aria-components/Button';
import { ButtonBase, ButtonFilled, ButtonGhost, ButtonOutlined } from './Button.variants.js';
type UnityButtonProps = AriaButtonProps & ButtonBase & {
/**
* The button's appearance. It can be one of the following: 'primary', 'secondary', 'ghost'.
* @default 'primary'
*/
variant: 'primary' | 'secondary' | 'ghost' | 'outlined';
/**
* The button size. It can be full size or default size (min-content).
* @default 'default'
*/
size?: ButtonBase['size'];
/**
* The button's color. It can be one of the following: 'primary', 'inverted'.
* @default 'primary'
*/
color?: ButtonFilled['color'] | ButtonOutlined['color'] | ButtonGhost['color'];
/**
* The loading state of the button.
* @default false
*/
isLoading?: boolean;
/**
* The button's prefix icon. It has to be one of the icons from the Unity Icons package.
*/
prefixIcon?: UnityIcon;
/**
* The button's suffix icon. It has to be one of the icons from the Unity Icons package.
* @default undefined
*/
suffixIcon?: UnityIcon;
/**
* The length of the label in characters before truncation applies. Truncation won't happen by default unless you specify this prop
* @default undefined
*/
truncateLabelLength?: number;
};
type UnionButtonProps = (UnityButtonProps & {
variant: 'primary';
} & ButtonFilled) | (UnityButtonProps & {
variant: 'secondary';
} & ButtonOutlined) | (UnityButtonProps & {
variant: 'ghost';
} & ButtonGhost) | (UnityButtonProps & {
variant: 'outlined';
} & ButtonOutlined);
export type ButtonProps = PropsWithChildren<Omit<UnionButtonProps, 'style'>>;
/**
* Buttons allow users to take actions, and make choices, with a single tap.
*/
declare const Button: import('react').ForwardRefExoticComponent<Omit<UnionButtonProps, "style"> & {
children?: import('react').ReactNode | undefined;
} & import('react').RefAttributes<HTMLButtonElement>>;
export { Button };