> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cskn.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Buttons and links

> Pressable, Button, Link and Chip.

## Pressable

The base of every tappable control in the kit. It fires a haptic on press, is reachable by keyboard and TV remote (with a focus ring), and shows a press animation. It renders a `button` and accepts all its attributes.

```tsx theme={null}
import { Pressable } from '@cskn/ui';

<Pressable haptic="medium" onClick={toggleFavorite} aria-label="Favorite">♥</Pressable>
```

<ParamField path="haptic" type="'light' | 'medium' | 'heavy' | false" default="'light'">Haptic on press. `false` turns it off.</ParamField>
<ParamField path="autoFocus" type="boolean">Take focus first when its screen or overlay opens (TV and keyboard).</ParamField>

## Button

```tsx theme={null}
import { Button, Icon } from '@cskn/ui';

<Button variant="primary" size="lg" block loading={saving} onClick={save}>Save</Button>
<Button variant="outline" leftIcon={<Icon name="share" size={16} />}>Share</Button>
<Button variant="danger">Delete</Button>
```

<ParamField path="variant" type="'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'" default="'primary'">Visual style. Colors come from theme tokens.</ParamField>
<ParamField path="size" type="'sm' | 'md' | 'lg'" default="'md'">Height follows `control.heightSm`, `height` and `heightLg`.</ParamField>
<ParamField path="block" type="boolean">Fill the container's width.</ParamField>
<ParamField path="loading" type="boolean">Replace the label with a spinner and disable the button.</ParamField>
<ParamField path="leftIcon / rightIcon" type="ReactNode">Icons beside the label.</ParamField>

Also accepts every `Pressable` prop.

## Link

An anchor with `Pressable` behavior: focusable, remote-reachable, with a haptic on tap.

```tsx theme={null}
import { Link } from '@cskn/ui';

<Link href="/docs">Read the docs</Link>
<Link href="https://example.com" external>Example</Link>

<Link href={`/books/${book.id}`} variant="plain">
  <BookCard book={book} />
</Link>
```

<ParamField path="href" type="string" required>Destination.</ParamField>
<ParamField path="external" type="boolean">Open in a new tab with a safe `rel`.</ParamField>
<ParamField path="variant" type="'text' | 'plain'" default="'text'">`text` is an inline accent link; `plain` wraps a card or row with no link styling.</ParamField>
<ParamField path="haptic" type="'light' | 'medium' | 'heavy' | false" default="'light'">Haptic on tap.</ParamField>

## Chip

A selectable pill, for filters and tags.

```tsx theme={null}
import { Chip } from '@cskn/ui';

<Chip selected={genre === 'fiction'} onClick={() => setGenre('fiction')}>Fiction</Chip>
```

<ParamField path="selected" type="boolean">Selected styling.</ParamField>

Also accepts every `Pressable` prop.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.