Core

Button

The kit's signature button: on hover or keyboard focus a grid of squares dissolves in behind the label, then the label switches to the ink color. The squares are created on the first interaction only.

Renders a <button type="button"> unless asChild is set. All native button props (onClick, disabled, type, form…) are passed through.

demos/button.tsx

import { Button } from "pixelbits/button";

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="primary">Get started</Button>
      <Button>Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="danger">Delete</Button>
      <Button roll>Rolling label</Button>
      <Button loading>Saving</Button>
    </div>
  );
}

Installation

npm: import

import { Button } from "pixelbits/button";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/button.json

API

<Button>

Renders a <button type="button"> unless asChild is set. All native button props (onClick, disabled, type, form…) are passed through.

Example

<Button variant="primary" onClick={save}>Save</Button>
<Button loading>Saving</Button>
<Button asChild><a href="/docs">Read the docs</a></Button>

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "outline" \| "ghost" \| "danger"	"secondary"	Visual style. `"primary"`: accent fill, for the one main action of a view. `"secondary"`: hairline border, for most actions. `"outline"`: accent border and text; fills with the accent on hover, for a second important action next to a primary one. `"ghost"`: no border, for toolbars and dense rows. `"danger"`: red, for destructive actions.
size	"sm" \| "md" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"	"md"	Height and padding. `"sm"` 32 px, `"md"` 40 px, `"lg"` 48 px. `"icon-sm"`, `"icon"`, `"icon-lg"`: square 32 / 40 / 48 px for a single icon (prefer `IconButton`, which also requires an `aria-label`).
asChild	boolean	false	Render the only child element instead of a `<button>`, merging the button's classes, props and ref into it. Use it for links: `<Button asChild><a href="/start">Start</a></Button>`.
pixel	boolean	true	The pixel dissolve on hover and keyboard focus. Set `false` for a plain button with a simple background change.
loading	boolean	false	Shows a pixel spinner before the label, sets `aria-busy` and disables the button so it cannot be pressed twice.
roll	boolean	false	The label rolls up on hover and focus while a copy comes in from below (as in the full-screen menu). Only for plain text labels, and not with `asChild`.

Also accepts every prop of ButtonHTMLAttributes<HTMLButtonElement>.