Link Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

import type { ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode } from "react";

/* DevSnips React — LinkButton
 * Button styled as an inline link. color.link text, underline on hover, no
 * border or fill. Renders an <a> when href is set, a <button> otherwise.
 */

export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";

export interface LinkButtonProps
  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "href"> {
  /** Render as an anchor with this URL. */
  href?: string;
  /** Disabled state (button: disabled attr; anchor: aria-disabled). */
  disabled?: boolean;
  iconLeft?: ReactNode;
  iconRight?: ReactNode;
}

function cx(...parts: Array<string | false | null | undefined>): string {
  return parts.filter(Boolean).join(" ");
}

const LINK =
  "inline-flex items-center gap-1.5 rounded-[var(--ds-radius-sm)] border-0 bg-transparent " +
  "p-0 font-medium leading-none text-[var(--ds-color-link)] underline-offset-4 " +
  "transition-colors duration-150 ease-out motion-reduce:transition-none " +
  "hover:text-[var(--ds-color-link-hover)] hover:underline " +
  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-color-focus-ring)] " +
  "disabled:pointer-events-none disabled:opacity-50";

export function LinkButton({
  children,
  href,
  disabled = false,
  iconLeft,
  iconRight,
  className,
  type = "button",
  onClick,
  ...rest
}: LinkButtonProps) {
  const content = (
    <>
      {iconLeft}
      <span>{children}</span>
      {iconRight}
    </>
  );
  if (href) {
    return (
      <a
        href={disabled ? undefined : href}
        className={cx(LINK, className)}
        aria-disabled={disabled || undefined}
        onClick={disabled ? (e: React.MouseEvent) => e.preventDefault() : onClick}
        {...rest}
      >
        {content}
      </a>
    );
  }
  return (
    <button
      type={type}
      className={cx(LINK, className)}
      disabled={disabled}
      onClick={onClick}
      {...rest}
    >
      {content}
    </button>
  );
}

export default LinkButton;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

/* DevSnips React — JavaScript parity build.
 * Same API, behavior, and classes as code.tsx; TypeScript types removed.
 * Regenerated from code.tsx — edit code.tsx and re-run the generator.
 */

function cx(...parts) {
  return parts.filter(Boolean).join(" ");
}
const LINK = "inline-flex items-center gap-1.5 rounded-[var(--ds-radius-sm)] border-0 bg-transparent p-0 font-medium leading-none text-[var(--ds-color-link)] underline-offset-4 transition-colors duration-150 ease-out motion-reduce:transition-none hover:text-[var(--ds-color-link-hover)] hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-color-focus-ring)] disabled:pointer-events-none disabled:opacity-50";
export function LinkButton({
  children,
  href,
  disabled = false,
  iconLeft,
  iconRight,
  className,
  type = "button",
  onClick,
  ...rest
}) {
  const content = <>
      {iconLeft}
      <span>{children}</span>
      {iconRight}
    </>;
  if (href) {
    return <a
      href={disabled ? undefined : href}
      className={cx(LINK, className)}
      aria-disabled={disabled || undefined}
      onClick={disabled ? (e) => e.preventDefault() : onClick}
      {...rest}
    >
        {content}
      </a>;
  }
  return <button
    type={type}
    className={cx(LINK, className)}
    disabled={disabled}
    onClick={onClick}
    {...rest}
  >
      {content}
    </button>;
}

export default LinkButton;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

# Link Button

A button rendered as an inline link for terse secondary actions inside forms and rows. Reads as a link but still triggers onClick; for true navigation, pass an href.

## Installation

This component requires **React** and **Tailwind CSS**. Drop `code.tsx` (or `code.jsx` for JavaScript projects) into your project. Tailwind utility classes are included directly in the component, so no separate CSS file is required.

The component consumes the DevSnips semantic design tokens through Tailwind arbitrary values (for example `bg-[var(--ds-color-primary)]`). Define the `--ds-*` tokens once in your theme — see [React/DESIGN_TOKENS.md](../../../DESIGN_TOKENS.md) for the full token spec.

## Usage

```tsx
<LinkButton onClick={forgot}>Forgot password?</LinkButton>
<LinkButton href="/help">View all</LinkButton>
```

## JavaScript

A `code.jsx` build is provided for projects that ship plain JSX. It exposes the same API and behavior as `code.tsx` — only the TypeScript types are removed.

## Props

| Prop | Type | Default |
|---|---|---|
| `children` | `ReactNode` | — |
| `href` | `string` | — (renders `<a>` when set) |
| `disabled` | `boolean` | `false` |
| `iconLeft` / `iconRight` | `ReactNode` | — |
| `type` | `button \| submit \| reset` | `button` (button mode) |

When `href` is set the component renders an `<a>` (with `aria-disabled` when disabled); otherwise a `<button>`.

## Variants

Single link variant: `color.link` text, underline on hover, no border or fill. When `href` is provided, renders a real anchor.

## Sizes

Height is auto (inline). Font inherits the surrounding text size; use it inline with body copy.

## States

default · hover (underline + `link-hover`) · focus-visible · disabled (reduced opacity + `aria-disabled`).

## Accessibility

Button mode renders a native `<button>`; link mode renders a native `<a href>`. Focus-visible ring uses `color.focus-ring`. Disabled links use `aria-disabled` (not `tabindex=-1`) so the affordance stays perceivable; pair with JS that ignores activation when disabled.

## Styling

Tailwind classes are included directly in the component and consume the DevSnips semantic design tokens (`--ds-*`) via arbitrary values. The button themes with the surface automatically in light and dark mode. No component-specific CSS file is needed.

## Design Tokens

See [React/DESIGN_TOKENS.md](../../../DESIGN_TOKENS.md) for the authoritative token specification. This button uses the semantic color, radius, and motion tokens; define them once in your project theme and every button in the family stays in sync.

## Notes

Use for terse inline actions ("View all", "Forgot password?", "Add label"). For primary navigation, prefer a real anchor or a SolidButton.