TileLink Component

A clickable tile component for link grids, featuring text content with an arrow icon.

TileLink is an atomic component designed for use in grid layouts. It provides a consistent, interactive tile with support for both links (<a>) and buttons (<button>), featuring smooth animations and full accessibility support.

• Two Color Variants: Gray and Lilac
• Light/Dark Mode: Full theming support
• Five Interaction States: Default, Hover, Focused, Pressed, Disabled
• Window Shade Animation: Hover color wipes from bottom to top on enter, top to bottom on exit
• Arrow Icon: Animated arrow that moves on hover
• Responsive: Adapts padding and font size across breakpoints
• Accessible: Proper ARIA labels, focus states, and semantic HTML

• Light Mode: gray-200 background (#E6EAF0), black text
• Dark Mode: gray-500 background (#5A5A5E), white text

• Both Modes: lilac-100 background, black text (consistent across light/dark)

<TileLink
  variant="gray"
  label="Documentation"
  href="/docs"
/>

<TileLink
  variant="lilac"
  label="Get Started"
  onClick={() => navigate('/start')}
/>

<TileLink
  variant="gray"
  label="Coming Soon"
  disabled
/>

• Transition Duration: 200ms
• Timing Function: cubic-bezier(0.98, 0.12, 0.12, 0.98)
• Hover Effect: Window shade animation using clip-path
• Arrow Animation: Translates 4px to the right on hover

• Renders as semantic <a> when href is provided
• Renders as semantic <button> when onClick is provided
• Includes aria-label for screen readers
• Includes aria-disabled for disabled states
• 2px focus outline with proper offset
• Keyboard navigable

• TileLink.tsx - React component
• TileLink.scss - Styles with BEM naming convention
• README.md - This file

• LinkSmallGrid: Pattern component that uses TileLink in a responsive grid layout
• LinkArrow: Arrow icon component used within TileLink

Part of the Brand Design System (BDS) with bds- namespace prefix.

See about/tile-link-showcase.page.tsx for comprehensive examples of all variants and states.