## Import

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

## Live Editor

```jsx
<Button>Example</Button>
```

## Guidelines

### When to use

- Button is for triggering an action, such as save, cancel, or delete.

### Do

- Label with a clear action verb tied to the outcome.
- Limit one Primary button per screen.
- Use Primary for the most important action. Use Secondary for supporting actions. Use Tertiary for low-emphasis actions. Use Destructive only for irreversible data loss.
- Use Confirm + Cancel for reversible flows. Cancel should be Tertiary.
- Use Destructive + Cancel for irreversible actions. Add a confirmation step before the action runs.
- Use Secondary for equal-weight toolbar actions.
- In horizontal action rows such as dialogs and form footers, place Primary on the right and Cancel on the left in left-to-right layouts.

### Avoid

- Using vague destructive labels such as Yes or Confirm. Name the action, such as Delete Account.
- Using Primary when no action should dominate, including equal-weight toolbar actions.
- Using Button for navigation to a URL. Use Link.
- Nesting buttons or wrapping a Button in an `<a>`.

## Events

The Button 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 Button.

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

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

  return (
    <>
      <Button
        onPressStart={(e) => setPointerType(e.pointerType)}
        onPressEnd={() => setPointerType("")}
      >
        Events
      </Button>
      <p style={{ marginTop: "1rem" }}>
        {pointerType
          ? `You are pressing the Button with a ${pointerType}!`
          : "Clicked, press, or keyboard interact with Button."}
      </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

```jsx
<>
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="tertiary">Tertiary</Button>
  <Button variant="destructive">Destructive</Button>
</>
```

### Size

```jsx
<>
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
</>
```

### Leading & Trailing Icon

To render an icon inside of the `Button` component, pass the icon as a child along with the label.

```jsx
<div style={{ display: "flex", gap: 16 }}>
  <Button>
    <Search />
    Leading Icon
  </Button>
  <Button>
    Trailing Icon
    <Search />
  </Button>
</div>
```

## LinkButton

The `LinkButton` component provides the same styling as the `Button` 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 buttons.

### Import

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

### Example

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

### LinkButton vs Button

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

### Styling

The `LinkButton` component supports all the same styling options as the regular `Button` component (variants, sizes) shown in the examples above. You can add icons, use different variants, and adjust sizes in the same way.

## BaseButton

The `BaseButton` is an unstyled HTML `button` element that primarily is used as a wrapper to build for building custom button components. It does not include any default styles or behaviors, allowing you to fully customize its appearance.

### Import

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

### Example

```jsx
<div style={{ display: "flex", gap: 16 }}>
  {/* Avatar */}
  <BaseButton
    onPress={() => {
      alert("BaseButton Avatar Pressed");
    }}
  >
    <Avatar.Root size="md">
      <Avatar.Fallback>BB</Avatar.Fallback>
    </Avatar.Root>
  </BaseButton>

  {/* Chip */}
  <BaseButton
    onPress={() => {
      alert("BaseButton Chip Pressed");
    }}
  >
    <Chip>BaseButton Chip</Chip>
  </BaseButton>
</div>
```

## Props

### Button

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| fullWidth | `boolean` | `false` | Renders the Button in with a fluid width |
| 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 the ability to focus, and announces the pending state to screen readers. |
| ref | `Ref<HTMLButtonElement>` | - | Requires React 19 |
| size | `"lg" \ | "md" \ | "sm"` | `md` | Determines the size of the Button |
| variant | `"destructive" \ | "primary" \ | "secondary" \ | "tertiary"` | `primary` | Variant for the 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. |
| children | `ChildrenOrFunction<ButtonRenderProps>` | - | The children of the component. A function may be provided to alter the children based on component state. |
| 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` | - | - |
| 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. |

### LinkButton

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| fullWidth | `boolean \ | null` | - | - |
| size | `"lg" \ | "md" \ | "sm" \ | null` | - | - |
| variant | `"destructive" \ | "primary" \ | "secondary" \ | "tertiary" \ | null` | - | - |
| 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. |
| children | `ChildrenOrFunction<LinkRenderProps>` | - | The children of the component. A function may be provided to alter the children based on component state. |
| 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"` | - | - |