@payfit/unity-components
Version:
60 lines (59 loc) • 2.29 kB
TypeScript
import { UnityIcon } from '@payfit/unity-icons';
import { PropsWithChildren } from 'react';
import { LinkProps as AriaLinkProps } from 'react-aria-components/Link';
import { ButtonBase, ButtonFilled, ButtonGhost, ButtonOutlined } from '../button/Button.variants.js';
type UnityLinkButtonProps = Omit<AriaLinkProps, 'style' | 'className'> & ButtonBase & {
/**
* The link button's appearance. It can be one of the following: 'primary', 'secondary', 'ghost', 'outlined'.
* @default 'primary'
*/
variant: 'primary' | 'secondary' | 'ghost' | 'outlined';
/**
* The link button size. It can be full size or default size (min-content).
*/
size?: ButtonBase['size'];
/**
* The link button's color.
* @default 'primary'
*/
color?: ButtonFilled['color'] | ButtonOutlined['color'] | ButtonGhost['color'];
/**
* The link button's prefix icon. It has to be one of the icons from the Unity Icons package.
*/
prefixIcon?: UnityIcon;
/**
* The link button's suffix icon. It has to be one of the icons from the Unity Icons package.
*/
suffixIcon?: UnityIcon;
/**
* The loading state of the link button.
* @default false
*/
isLoading?: boolean;
/**
* Truncate the label to a specific number of characters.
*/
truncateLabelLength?: number;
/**
* Whether the link navigates to an external page. If true, the link will open in a new tab.
* @default false
*/
isExternal?: boolean;
};
type UnionLinkButtonProps = (UnityLinkButtonProps & {
variant: 'primary';
} & ButtonFilled) | (UnityLinkButtonProps & {
variant: 'secondary';
} & ButtonOutlined) | (UnityLinkButtonProps & {
variant: 'ghost';
} & ButtonGhost) | (UnityLinkButtonProps & {
variant: 'outlined';
} & ButtonOutlined);
export type RawLinkButtonProps = PropsWithChildren<Omit<UnionLinkButtonProps, 'style'>>;
/**
* A link that visually looks like a button. Use it when you need navigation semantics with button appearance.
*/
declare const RawLinkButton: import('react').ForwardRefExoticComponent<Omit<UnionLinkButtonProps, "style"> & {
children?: import('react').ReactNode | undefined;
} & import('react').RefAttributes<HTMLAnchorElement>>;
export { RawLinkButton };