Buttons and links

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.

import { Pressable } from '@cskn/ui';

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

'light' | 'medium' | 'heavy' | false

default:"'light'"

Haptic on press. false turns it off.

boolean

Take focus first when its screen or overlay opens (TV and keyboard).

Button

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>

'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'

default:"'primary'"

Visual style. Colors come from theme tokens.

'sm' | 'md' | 'lg'

default:"'md'"

Height follows control.heightSm, height and heightLg.

boolean

Fill the container’s width.

boolean

Replace the label with a spinner and disable the button.

ReactNode

Icons beside the label.

Also accepts every Pressable prop.

Link

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

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>

string

required

Destination.

boolean

Open in a new tab with a safe rel.

'text' | 'plain'

default:"'text'"

text is an inline accent link; plain wraps a card or row with no link styling.

'light' | 'medium' | 'heavy' | false

default:"'light'"

Haptic on tap.

Chip

A selectable pill, for filters and tags.

import { Chip } from '@cskn/ui';

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

boolean

Selected styling.

Also accepts every Pressable prop.

Overview

Components

Platform

Profile integration

Pressable

Button

Link

Chip

​Pressable

​Button

​Link

​Chip

Pressable

Button

Link

Chip