@payfit/unity-components
Version:
47 lines (46 loc) • 2.65 kB
TypeScript
import { NavigationCardProps } from './NavigationCard.types.js';
/**
* The NavigationCard is a clickable card component for navigating between sections or pages in your application.
* Use navigation cards to create intuitive and appealing navigation patterns that guide users through different areas of your app.
* The component supports both link and button behaviors, and can be customized with flexible spacing options.
* @param {NavigationCardProps} props - Props including standard link/button props, padding, gap, prefix, and suffix
* @example
* ```tsx
* import {
* RawNavigationCard,
* NavigationCardLabel,
* NavigationCardDescription
* } from '@payfit/unity-components'
* import { Icon } from '@payfit/unity-icons'
*
* function Example() {
* return (
* <RawNavigationCard
* href="/dashboard"
* prefix={<Icon name="dashboard" />}
* >
* <NavigationCardLabel>Dashboard</NavigationCardLabel>
* <NavigationCardDescription>
* View your company overview
* </NavigationCardDescription>
* </RawNavigationCard>
* )
* }
* ```
* @remarks
* - Use `asElement="a"` (default) for navigation links or `asElement="button"` for actions
* - Control spacing with `padding` (all sides), `paddingBlock` (vertical), `paddingInline` (horizontal), or individual sides via object notation
* - Adjust gap between prefix, body, and suffix with the `gap` prop
* - Default spacing values: `padding="$300"` (24px) and `gap="$150"` (12px)
* - Compose with `NavigationCardLabel` and `NavigationCardDescription` for proper accessibility
* - The component automatically handles focus states, hover effects, and disabled styling
* - For Tanstack Router integration, use the `NavigationCard` from `@payfit/unity-components/integrations/tanstack-router`
* @see {@link NavigationCardProps} for all available props
* @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/navigation-card GitHub}
* @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=14505-64292 Figma}
* @see Design docs in {@link https://www.payfit.design/ Payfit.design}
* @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/navigation-navigationcard--docs unity-components.payfit.io}
*/
declare const RawNavigationCard: import('react').ForwardRefExoticComponent<NavigationCardProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
export { RawNavigationCard };
export type { NavigationCardProps } from './NavigationCard.types.js';