LinkButton

LinkButton looks and behaves like a regular button but navigates on click. For internal paths it uses React Router's navigate, and for absolute URLs (starting with http:// or https://) it sets window.location.href. An optional onClick callback is also supported alongside navigation. Use it as a drop-in replacement for <a> or <Link> when you need the full button styling system.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | title | string | Yes | — | Label text displayed inside the button. | | to | string | No | — | Destination path or URL. Internal paths use navigate; absolute URLs use window.location.href. | | onClick | () => void | No | — | Optional callback fired before navigation. Can be used without to for pure click handling. | | color | string | No | "primary" | Theme color key or any CSS hex/named color. | | borderRadius | number | No | 4 | Border radius in pixels. | | type | "clear" \| "outline" \| "solid" | No | "solid" | Visual variant of the button. | | disabled | boolean | No | false | Disables navigation and interaction. | | startIcon | string | No | — | Icon identifier rendered before the label. | | startIconPaths | any[] | No | — | SVG path data for a custom start icon. | | startIconSize | number | No | — | Override size for the start icon in pixels. | | endIcon | string | No | — | Icon identifier rendered after the label. | | endIconPaths | string[] | No | — | SVG path data for a custom end icon. | | endIconSize | number | No | — | Override size for the end icon in pixels. | | hasShadow | boolean | No | true | Whether to apply a drop shadow. | | style | React.CSSProperties | No | — | Inline styles applied to the button container. | | titleStyle | React.CSSProperties | No | — | Inline styles applied to the label text. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controls padding, font size, and icon size. | | className | string | No | "link-button" | CSS class name applied to the wrapper. |

Usage

Internal navigation

import LinkButton from '@/components/buttons/LinkButton';

export default function Example() {
  return (
    <LinkButton
      title="View Orders"
      to="/orders"
      startIcon="list"
    />
  );
}

External link

import LinkButton from '@/components/buttons/LinkButton';

export default function Example() {
  return (
    <LinkButton
      title="Visit Website"
      to="https://snapping.dev"
      endIcon="externalLink"
      type="outline"
      size="sm"
    />
  );
}

Navigation with a callback

import LinkButton from '@/components/buttons/LinkButton';

export default function Example() {
  return (
    <LinkButton
      title="Go to Checkout"
      to="/checkout"
      onClick={() => console.log('tracking click')}
    />
  );
}