---
summary: ページ遷移を伴うボタン風リンク
category: Actions
---

# LinkButton

ページ遷移を伴うボタン風のリンクコンポーネントです。
ボタンの見た目でページ遷移する素の `<a>` の代わりに使います。その場でアクションを実行するには Button を使ってください。
文章の中のテキストリンクには使えません（wip-ui にはテキストリンクのコンポーネントがありません）。

## 基本の使い方

```tsx
import { LinkButton } from 'wip-ui'

<LinkButton href="/orders">注文履歴</LinkButton>
```

## 使う場面

- 別のページへ遷移する（URL が変わる）

## 使い方

色・外観、サイズ・幅、アイコンの使い方は Button と同じです（Button.md を参照）。

### 新しいタブで開く
- [should] 新しいタブで開く場合は、trailing にアイコンを置いてそのことを示す

## 文言

文言の基本ルールは Button と同じです（Button.md を参照）。

- [should] 遷移先の内容を簡潔に表す名詞をラベルにする（例：「注文履歴」）

## アクセシビリティ

- [must] iconOnly のときは aria-label などでリンクの名前を付ける

## Props（自動生成）

型定義から生成した props の一覧です。react-aria-components から引き継いだ props の説明は英語です。DOM の汎用的な属性・イベントは省略しています。

### LinkButton

| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
| appearance | "flat" \| "outlined" \| "transparent" \| "white" | flat | ボタンの外観スタイル |
| color | "neutral" \| "interactive" \| "negative" | neutral | ボタンの色テーマ |
| size | "s" \| "m" \| "l" | m | ボタンのサイズ |
| width | "auto" \| "half" \| "third" \| "full" | auto | ボタンの幅 |
| iconOnly | boolean | false | アイコンのみで表示する |
| leading | ReactNode | - | ボタンの先頭に表示するアイコン |
| trailing | ReactNode | - | ボタンの末尾に表示するアイコン |
| href | string | - | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| target | HTMLAttributeAnchorTarget | - | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| 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). |
| isDisabled | boolean | - | Whether the link is disabled. |
| onPress | ((e: PressEvent) => void) | - | Handler that is called when the press is released over the target. |
| onPressStart | ((e: PressEvent) => void) | - | Handler that is called when a press interaction starts. |
| onPressEnd | ((e: PressEvent) => void) | - | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| onPressChange | ((isPressed: boolean) => void) | - | Handler that is called when the press state changes. |
| 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. |
| onClick | ((e: MouseEvent<FocusableElement, MouseEvent>) => void) | - | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides  additional event details for non-mouse interactions. |
| autoFocus | boolean | - | Whether the element should receive focus on render. |
| 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-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. |
| 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). |
| 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). |
| 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 | "" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url" | - | 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). |
| routerOptions | undefined | - | Options for the configured client side router. |
| children | ChildrenOrFunction<ButtonRenderProps> | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | ClassNameOrFunction<ButtonRenderProps> | - | 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. |
| 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. |
| 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. |