Button

Triggers an action. Solid primary or 1px ghost; 40px tall, 36px small.

Preview

In action

Print

Studio / Alkmaar

Issue 03 goes on the press at 06:00. One primary per view.

When to use

Use it for

One primary action per view, with ghost for the secondary action.
Submitting a form or answering a dialog.

Not for

Navigation that changes the URL; use Link or a nav component.
On and off state; use Toggle or Switch, which carry aria-pressed and aria-checked.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Button } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/button.

2. Vendor the source

npx @noorddev/vlak-cli add button

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/button.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Button } from "@noorddev/vlak-react";

<Button>Primary action</Button>
<Button variant="ghost" size="sm">Secondary</Button>
<Button disabled>Saving…</Button>

Props

Button

Prop	Type	Default	Description
`variant`	`"primary" \| "ghost"`	`"primary"`	Solid ink primary or hairline ghost. One primary per view.
`size`	`"default" \| "sm"`	`"default"`
`grouped`	`boolean`	`false`	Flush into a ButtonGroup: no own stroke, one ink seam.

Also accepts ButtonHTMLAttributes<HTMLButtonElement>.

Keyboard

Keys	Does
`Tab`	Moves focus to the button
`Enter, Space`	Activates it

Accessibility

Renders a native <button>; type defaults to "button", so pass type="submit" inside a form.
The visible text is the name. Give icon-only buttons an aria-label.
2px ink focus ring on :focus-visible. disabled uses the native attribute and 40% opacity; forced colors keep system colors.

Markup

<button class="rs-btn-primary">Primary action</button>
<button class="rs-btn-ghost">Secondary</button>

Classes

.rs-btn-primary.rs-btn-ghost.rs-btn-sm.rs-btn-grouped.rs-btn-grouped-ghost