# LinkButton

```ts
import { LinkButton } from 'cx/widgets';
```

Link buttons look like buttons and behave like [Links](/docs/layout/link). `LinkButton` inherits `Button` options such as `confirm`, `icon` or `disabled` state.

```tsx
import { LinkButton } from "cx/widgets";

export default (
  <div className="flex flex-wrap items-start gap-2">
    <LinkButton mod="primary" href="~/docs/intro/installation">
      Installation
    </LinkButton>
    <LinkButton mod="danger" href="~/docs/intro/breaking-changes">
      Breaking Changes
    </LinkButton>
    <LinkButton mod="hollow" href="~/docs/forms/text-field">
      TextField
    </LinkButton>
    <LinkButton disabled href="~/docs/intro/what-is-cxjs">
      Disabled
    </LinkButton>
  </div>
);

```

## Configuration

| Property | Type | Description |
| -------- | ---- | ----------- |
| `href` | `string` | URL to the link's target location. Use `~/` or `#/` prefix for pushState/hash based navigation. Use `+/` prefix for URLs relative to the parent route. |
| `url` | `string` | Binding to the current URL location in the store. If `href` matches `url`, the `active` CSS class is applied. |
| `match` | `string` | Determines how `href` is matched against `url` to detect active state. Supported values are `equal` (default), `prefix`, and `subroute`. |
| `disabled` | `boolean` | Set to `true` to disable the link button. |
| `target` | `string` | Specifies where to open the linked document (e.g., `_blank`). |
| `confirm` | `string` | Confirmation message to show before navigation. Inherited from `Button`. |
| `icon` | `string` | Icon to display inside the button. Inherited from `Button`. |
| `mod` | `string` | Visual modifier. Common values: `primary`, `danger`, `hollow`. |
| `activeClass` | `string \| object` | Additional CSS class applied when the link is active. |
| `activeStyle` | `string \| object` | Additional CSS style applied when the link is active. |
| `inactiveClass` | `string \| object` | Additional CSS class applied when the link is not active. |
| `inactiveStyle` | `string \| object` | Additional CSS style applied when the link is not active. |