## Import

```jsx
import { IconButton } from "@cfa/react-core";
```

## Live Editor

```jsx
<IconButton aria-label="Docs Icon Button" onPress={() => alert("Icon Button Pressed!")}>
  <Download />
</IconButton>
```

## Guidelines

### When to use

- IconButton is for a single, recognizable action where a labeled Button would crowd the layout.

### Do

- Pair every IconButton with an `aria-label` that names the action verb, not the icon shape.
- In a toolbar row, use the Secondary variant, the same size across the row, and label each button with a verb only, such as `Bold`, `Italic`, or `Export`.
- For an inline action beside text, use the Tertiary variant, small size, placed at the end of the line it modifies.
- For a card or row action such as dismiss or a menu trigger, use the Tertiary variant for low visual weight. Add a Tooltip with the action name on hover and focus.

### Avoid

- Using IconButton without an `aria-label`. Screen readers will have nothing to announce.
- Using IconButton when a labeled Button fits. Visible text is more accessible than an icon plus a hover Tooltip.

## Events

The IconButton is built with the `onPress` prop, similar to `onClick`, but supports all user interactions via mouse, keyboard, and touch. The `onPressStart`, `onPressEnd`, and `onPressChange` events are triggered when a user presses, releases, or changes the state of the IconButton.

These handlers receive a `PressEvent` with information on type of event and the target.

```jsx
function OnPressExample() {
  let [pointerType, setPointerType] = React.useState("");

  return (
    <>
      <IconButton
        onPressStart={(e) => setPointerType(e.pointerType)}
        onPressEnd={() => setPointerType("")}
      >
        <Download />
      </IconButton>
      <p style={{ marginTop: "1rem" }}>
        {pointerType
          ? `You are pressing the IconButton with a ${pointerType}!`
          : "Clicked, press, or keyboard interact with IconButton."}
      </p>
    </>
  );
}
```

### PressEvent Props

| Property | Type | Description |
| --- | --- | --- |
| type | `'pressstart'` \ | `'pressend'` \ | `'pressup'` \ | `'press'` | The type of press event being fired. |
| pointerType | PointerType | The pointer type that triggered the press event. |
| target | Element | The target element of the press event. |
| shiftKey | boolean | Whether the shift keyboard modifier was held during the press event. |
| ctrlKey | boolean | Whether the ctrl keyboard modifier was held during the press event. |
| metaKey | boolean | Whether the meta keyboard modifier was held during the press event. |
| altKey | boolean | Whether the alt keyboard modifier was held during the press event. |
| x | number | X position relative to the target. |
| y | number | Y position relative to the target. |

### PressEvent Methods

| Method | Description |
| --- | --- |
| continuePropagation(): void | By default, press events stop propagation to parent elements. In cases where a handler decides not to handle a specific event, it can allow propagation. |

## Examples

### Variant

The `variant` prop defaults to `variant="tertiary"`, with these additional options: `"primary" | "secondary" | "destructive"`.

```jsx
<>
  <IconButton aria-label="Download" variant="tertiary">
    <Download />
  </IconButton>
  <IconButton aria-label="Download" variant="primary">
    <Download />
  </IconButton>
  <IconButton aria-label="Download" variant="secondary">
    <Download />
  </IconButton>
  <IconButton aria-label="Download" variant="destructive">
    <Download />
  </IconButton>
</>
```

### Disabled

For a disabled IconButton, use the `isDisabled` prop.

```jsx
<IconButton aria-label="Download" isDisabled>
  <Download />
</IconButton>
```

### Size

The `size` prop allows for four sizes: `"xs" | "sm" | "md" | "lg"`. Default is `xs`.

Icon buttons render as squares at the same height as their `Button` counterparts where sizes align (`sm` with `Button` `sm`, and so on). Requires `@cfa/design-tokens-core` with `--ds-semantic-size-xs` for the `xs` size.

```jsx
<>
  <IconButton aria-label="Download" size="xs">
    <Download />
  </IconButton>
  <IconButton aria-label="Download" size="sm">
    <Download />
  </IconButton>
  <IconButton aria-label="Download" size="md">
    <Download />
  </IconButton>
  <IconButton aria-label="Download" size="lg">
    <Download />
  </IconButton>
</>
```

### Customizing appearance

`IconButton` exposes CSS custom properties for contextual styling. Set them on the button or a parent container:

| Custom property | Description |
| --- | --- |
| `--icon-button-content` | Icon color |
| `--icon-button-surface` | Background color |
| `--icon-button-surface-hover` | Background on hover |
| `--icon-button-surface-active` | Background on press or pending |
| `--icon-button-border` | Border color (`secondary` variant) |
| `--icon-button-border-hover` | Border on hover (`secondary` variant) |
| `--icon-button-border-active` | Border on press or pending (`secondary` variant) |

Icon color does not change on hover or press — only the surface updates.

Use `--icon-button-content` on knockout or dark surfaces instead of the removed `color="white"` prop:

```css
.my-surface {
  --icon-button-content: var(--ds-semantic-color-content-knockout);
}
```

## LinkIconButton

The `LinkIconButton` component provides the same styling as the `IconButton` component but renders as an anchor (`<a>`) element using React Aria's `Link` component underneath. It's ideal for navigation actions that should visually appear as icon buttons.

### Import

```jsx
import { LinkIconButton } from "@cfa/react-core";
```

### Example

```jsx
<div style={{ display: "flex", gap: 16 }}>
  <LinkIconButton href="#" aria-label="Internal link">
    <Download />
  </LinkIconButton>
  <LinkIconButton
    href="https://design-system.cfahome.com"
    target="_blank"
    variant="primary"
    aria-label="External link"
  >
    <Download />
  </LinkIconButton>
</div>
```

### LinkIconButton vs IconButton

- Use `LinkIconButton` when the action navigates to a new page or URL
- Use `IconButton` when the action performs an operation but stays on the same page
- `LinkIconButton` accepts the same styling props as `IconButton` (`variant`, `size`, `isDisabled`)
- `LinkIconButton` accepts standard anchor attributes like `href`, `target`, and `rel`

### Styling

The `LinkIconButton` component supports the same styling options as `IconButton` (variants, sizes) and the same `--icon-button-*` custom properties shown above.

### Disabled

For a disabled `LinkIconButton`, use the `isDisabled` prop.

```jsx
<LinkIconButton href="#" aria-label="Download" isDisabled>
  <Download />
</LinkIconButton>
```

### Accessibility

Because `LinkIconButton` renders an icon without visible text, provide an accessible name with `aria-label` or `aria-labelledby`.

```jsx
<LinkIconButton href="/downloads" aria-label="Download report">
  <Download />
</LinkIconButton>
```

## Props

### IconButton

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| children\* | `ReactElement<unknown, string \ | JSXElementConstructor<any>>` | - | The content of the icon button. |
| ref | `Ref<HTMLButtonElement>` | - | Requires React 19 |
| size | `"lg" \ | "md" \ | "sm" \ | "xs"` | `xs` | Determines the size of the IconButton. |
| variant | `"destructive" \ | "primary" \ | "secondary" \ | "tertiary"` | `tertiary` | Variant for the icon button. |
| aria-controls | `string` | - | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
| aria-current | `"date" \ | "false" \ | "location" \ | "page" \ | "step" \ | "time" \ | "true" \ | boolean` | - | Indicates whether this element represents the current item within a container or set of related elements. |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-disabled | `"false" \ | "true" \ | boolean` | - | Indicates whether the element is disabled to users of assistive technology. |
| aria-expanded | `"false" \ | "true" \ | boolean` | - | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
| aria-haspopup | `"dialog" \ | "false" \ | "grid" \ | "listbox" \ | "menu" \ | "tree" \ | "true" \ | boolean` | - | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| aria-pressed | `"false" \ | "mixed" \ | "true" \ | boolean` | - | Indicates the current "pressed" state of toggle buttons. |
| autoFocus | `boolean` | - | Whether the element should receive focus on render. |
| className | `ClassNameOrFunction<ButtonRenderProps>` | `'react-aria-Button'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| dir | `string` | - | - |
| excludeFromTabOrder | `boolean` | - | Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available. |
| form | `string` | - | The \`\<form>\` element to associate the button with. The value of this attribute must be the id of a \`\<form>\` in the same document. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form). |
| formAction | `string \ | ((formData: FormData) => void \ | Promise<void>)` | - | The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner. |
| formEncType | `string` | - | Indicates how to encode the form data that is submitted. |
| formMethod | `string` | - | Indicates the HTTP method used to submit the form. |
| formNoValidate | `boolean` | - | Indicates that the form is not to be validated when it is submitted. |
| formTarget | `string` | - | Overrides the target attribute of the button's form owner. |
| hidden | `boolean` | - | - |
| id | `string` | - | The element's unique identifier. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/id). |
| inert | `boolean` | - | - |
| isDisabled | `boolean` | - | Whether the button is disabled. |
| isPending | `boolean` | - | Whether the button is in a pending state. This disables press and hover events while retaining focusability, and announces the pending state to screen readers. |
| lang | `string` | - | - |
| name | `string` | - | Submitted as a pair with the button's value as part of the form data. |
| onAnimationEnd | `AnimationEventHandler<HTMLButtonElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLButtonElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLButtonElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLButtonElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLButtonElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLButtonElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onBlur | `((e: FocusEvent<Element, Element>) => void)` | - | Handler that is called when the element loses focus. |
| onClickCapture | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onFocus | `((e: FocusEvent<Element, Element>) => void)` | - | Handler that is called when the element receives focus. |
| onFocusChange | `((isFocused: boolean) => void)` | - | Handler that is called when the element's focus status changes. |
| onGotPointerCapture | `PointerEventHandler<HTMLButtonElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLButtonElement>` | - | - |
| onHoverChange | `((isHovering: boolean) => void)` | - | Handler that is called when the hover state changes. |
| onHoverEnd | `((e: HoverEvent) => void)` | - | Handler that is called when a hover interaction ends. |
| onHoverStart | `((e: HoverEvent) => void)` | - | Handler that is called when a hover interaction starts. |
| onKeyDown | `((e: KeyboardEvent) => void)` | - | Handler that is called when a key is pressed. |
| onKeyUp | `((e: KeyboardEvent) => void)` | - | Handler that is called when a key is released. |
| onLostPointerCapture | `PointerEventHandler<HTMLButtonElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLButtonElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLButtonElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLButtonElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLButtonElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLButtonElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLButtonElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLButtonElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLButtonElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLButtonElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLButtonElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLButtonElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLButtonElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLButtonElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLButtonElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLButtonElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLButtonElement>` | - | - |
| onPress | `((e: PressEvent) => void)` | - | Handler that is called when the press is released over the target. |
| onPressChange | `((isPressed: boolean) => void)` | - | Handler that is called when the press state changes. |
| onPressEnd | `((e: PressEvent) => void)` | - | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| onPressStart | `((e: PressEvent) => void)` | - | Handler that is called when a press interaction starts. |
| onPressUp | `((e: PressEvent) => void)` | - | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| onScroll | `UIEventHandler<HTMLButtonElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLButtonElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLButtonElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLButtonElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLButtonElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLButtonElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLButtonElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLButtonElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLButtonElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLButtonElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLButtonElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLButtonElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLButtonElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLButtonElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLButtonElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLButtonElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLButtonElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLButtonElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLButtonElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLButtonElement>` | - | - |
| preventFocusOnPress | `boolean` | - | Whether to prevent focus from moving to the button when pressing it.&#xA;&#xA;Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control. |
| render | `DOMRenderFunction<"button", ButtonRenderProps>` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;- You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;- Only a single root DOM element can be rendered (no fragments).&#xA;- You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| slot | `string \ | null` | - | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit \`null\` value indicates that the local props completely override all props received from a parent. |
| style | `StyleOrFunction<ButtonRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| suppressHydrationWarning | `boolean` | - | A React-only flag that suppresses the warning React normally logs when an element's server-rendered content doesn't match the client render during hydration. See \[React docs]\(https\://react.dev/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors). |
| translate | `"no" \ | "yes"` | - | - |
| type | `"button" \ | "reset" \ | "submit"` | `'button'` | The behavior of the button when used in an HTML form. |
| value | `string` | - | The value associated with the button's name when it's submitted with the form data. |

### LinkIconButton

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| children\* | `ReactElement<unknown, string \ | JSXElementConstructor<any>>` | - | The content of the icon button. |
| inline | `boolean \ | null` | - | - |
| size | `"lg" \ | "md" \ | "sm" \ | "xs"` | `xs` | Determines the size of the LinkIconButton. |
| variant | `"destructive" \ | "primary" \ | "secondary" \ | "tertiary"` | `tertiary` | Variant for the icon button. |
| aria-current | `"date" \ | "false" \ | "location" \ | "page" \ | "step" \ | "time" \ | "true" \ | boolean` | - | Indicates whether this element represents the current item within a container or set of related elements. |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| autoFocus | `boolean` | - | Whether the element should receive focus on render. |
| className | `ClassNameOrFunction<LinkRenderProps>` | `'react-aria-Link'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| dir | `string` | - | - |
| download | `string \ | boolean` | - | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). |
| hidden | `boolean` | - | - |
| href | `string` | - | A URL to link to. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| hrefLang | `string` | - | Hints at the human language of the linked URL. See\[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang). |
| id | `string` | - | The element's unique identifier. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/id). |
| inert | `boolean` | - | - |
| isDisabled | `boolean` | - | Whether the link is disabled. |
| lang | `string` | - | - |
| onAnimationEnd | `AnimationEventHandler<HTMLAnchorElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLAnchorElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLAnchorElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLAnchorElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLAnchorElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLAnchorElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onBlur | `((e: FocusEvent<Element, Element>) => void)` | - | Handler that is called when the element loses focus. |
| onClickCapture | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onFocus | `((e: FocusEvent<Element, Element>) => void)` | - | Handler that is called when the element receives focus. |
| onFocusChange | `((isFocused: boolean) => void)` | - | Handler that is called when the element's focus status changes. |
| onGotPointerCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onHoverChange | `((isHovering: boolean) => void)` | - | Handler that is called when the hover state changes. |
| onHoverEnd | `((e: HoverEvent) => void)` | - | Handler that is called when a hover interaction ends. |
| onHoverStart | `((e: HoverEvent) => void)` | - | Handler that is called when a hover interaction starts. |
| onKeyDown | `((e: KeyboardEvent) => void)` | - | Handler that is called when a key is pressed. |
| onKeyUp | `((e: KeyboardEvent) => void)` | - | Handler that is called when a key is released. |
| onLostPointerCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPress | `((e: PressEvent) => void)` | - | Handler that is called when the press is released over the target. |
| onPressChange | `((isPressed: boolean) => void)` | - | Handler that is called when the press state changes. |
| onPressEnd | `((e: PressEvent) => void)` | - | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| onPressStart | `((e: PressEvent) => void)` | - | Handler that is called when a press interaction starts. |
| onPressUp | `((e: PressEvent) => void)` | - | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| onScroll | `UIEventHandler<HTMLAnchorElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLAnchorElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLAnchorElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLAnchorElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLAnchorElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLAnchorElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLAnchorElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLAnchorElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLAnchorElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLAnchorElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLAnchorElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLAnchorElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLAnchorElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLAnchorElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLAnchorElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLAnchorElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLAnchorElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLAnchorElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLAnchorElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLAnchorElement>` | - | - |
| ping | `string` | - | A space-separated list of URLs to ping when the link is followed. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping). |
| referrerPolicy | `HTMLAttributeReferrerPolicy` | - | How much of the referrer to send when following the link. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). |
| rel | `string` | - | The relationship between the linked resource and the current page. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| render | `((props: DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> \ | DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement>, renderProps: LinkRenderProps) => ReactElement<...>)` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Note: You can check if \`'href' in props\` in order to tell whether to render an \`\<a>\` element.&#xA;&#xA;Requirements:&#xA;&#xA;- You must render the expected element type (e.g. if \`\<a>\` is expected, you cannot render a \`\<button>\`).&#xA;- Only a single root DOM element can be rendered (no fragments).&#xA;- You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| routerOptions | `undefined` | - | Options for the configured client side router. |
| slot | `string \ | null` | - | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit \`null\` value indicates that the local props completely override all props received from a parent. |
| style | `StyleOrFunction<LinkRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| suppressHydrationWarning | `boolean` | - | A React-only flag that suppresses the warning React normally logs when an element's server-rendered content doesn't match the client render during hydration. See \[React docs]\(https\://react.dev/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors). |
| target | `HTMLAttributeAnchorTarget` | - | The target window for the link. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| translate | `"no" \ | "yes"` | - | - |