@dinefy/react-link

Dinefy React Web UI - Link component for navigation

Installation

npm install @dinefy/react-link

Usage

Standard Link (Anchor)

import { Link } from "@dinefy/react-link";

<Link.Anchor href="/about">
  <Link.Label>About Us</Link.Label>
</Link.Anchor>

SPA Navigation (React Router)

<Link.Router to="/dashboard">
  <Link.Label>Dashboard</Link.Label>
</Link.Router>

External Link

<Link.Anchor external href="https://example.com">
  <Link.Label>Visit Example</Link.Label>
</Link.Anchor>

Variants

<Link.Anchor variant="primary" href="#">
  <Link.Label>Primary</Link.Label>
</Link.Anchor>

<Link.Anchor variant="secondary" href="#">
  <Link.Label>Secondary</Link.Label>
</Link.Anchor>

<Link.Anchor variant="muted" href="#">
  <Link.Label>Muted</Link.Label>
</Link.Anchor>

Sizes

<Link.Anchor size="xs" href="#"><Link.Label>XS</Link.Label></Link.Anchor>
<Link.Anchor size="sm" href="#"><Link.Label>SM</Link.Label></Link.Anchor>
<Link.Anchor size="md" href="#"><Link.Label>MD</Link.Label></Link.Anchor>
<Link.Anchor size="lg" href="#"><Link.Label>LG</Link.Label></Link.Anchor>
<Link.Anchor size="xl" href="#"><Link.Label>XL</Link.Label></Link.Anchor>

Disabled

<Link.Anchor href="#" disabled>
  <Link.Label>Disabled Link</Link.Label>
</Link.Anchor>

<Link.Router to="/dashboard" disabled>
  <Link.Label>Disabled Router Link</Link.Label>
</Link.Router>

API

Link.Anchor

Standard HTML anchor link.

| Prop | Type | Default | Description | |------|------|---------|-------------| | href | string | - | URL to navigate to | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | "md" | Size variant | | variant | "primary" \| "secondary" \| "muted" | "primary" | Color variant | | external | boolean | false | Opens in new tab with security | | underline | boolean | false | Always show underline | | disabled | boolean | false | Disables link interaction |

Link.Router

React Router link for SPA navigation.

| Prop | Type | Default | Description | |------|------|---------|-------------| | to | string | - | Route path | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | "md" | Size variant | | variant | "primary" \| "secondary" \| "muted" | "primary" | Color variant | | underline | boolean | false | Always show underline | | disabled | boolean | false | Disables link interaction |

Link.Label

Text content wrapper.