@payfit/unity-components
Version:
40 lines (39 loc) • 1.78 kB
TypeScript
import { RawLinkProps } from '../../link/RawLink.js';
export declare const BREADCRUMB_ITEM_MAX_WIDTH = 180;
export type RawBreadcrumbLinkProps = RawLinkProps;
/**
* A styled link component for breadcrumbs that enforces Unity design system styling.
* This component truncates long labels with a fixed max width and displays a tooltip when overflow happens.
* @param props - Link props from RawLink {@see {@link RawLinkProps}}
* @example
* ```tsx
* import { RawBreadcrumbLink } from '@payfit/unity-components'
*
* function Example() {
* return (
* <RawBreadcrumbLink href="/dashboard">
* Dashboard
* </RawBreadcrumbLink>
* )
* }
* ```
* @remarks
* - The component enforces breadcrumb-specific styling that cannot be overridden
* - Labels are truncated with a max width of 180px
* - Tooltip is displayed only when rendered text actually overflows
* - Uses the 'secondary' color variant for breadcrumb links
* @see {@link RawBreadcrumbLinkProps} for all available props
*/
declare const RawBreadcrumbLink: import('react').ForwardRefExoticComponent<Omit<import('react-aria-components').LinkProps, "style" | "className"> & {
href: HTMLAnchorElement["href"];
id?: import('react').HTMLAttributes<HTMLAnchorElement>["id"];
size?: "default" | "small" | "inherit" | "large" | undefined;
variant?: "inline" | "standalone" | undefined;
color?: "inherit" | "primary" | "secondary" | undefined;
isExternal?: boolean;
isCurrent?: Pick<import('react').HTMLAttributes<HTMLAnchorElement>, "aria-current"> | undefined;
isExact?: boolean;
maxCharactersTruncation?: number;
maxWidthTruncation?: import('react').CSSProperties["maxWidth"];
} & import('react').RefAttributes<HTMLAnchorElement>>;
export { RawBreadcrumbLink };