LinkButton

import { LinkButton } from 'cx/widgets';

Link buttons look like buttons and behave like Links. LinkButton inherits Button options such as confirm, icon or disabled state.

 <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> 

Installation Breaking Changes TextField Disabled

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.