Button

A slab with a label, cut on the slant and outlined in ink. It drops when pressed and springs back past its rest.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/button

Examples

Variants

button-variants.tsx

import { Button } from "@/components/zero/button";export default function ButtonVariants() {  return (    <>      <Button>Accept commission</Button>      <Button variant="secondary">Save for later</Button>      <Button variant="danger">Abandon</Button>      <Button variant="ghost">Skip</Button>    </>  );}

Sizes

button-sizes.tsx

import { Button } from "@/components/zero/button";export default function ButtonSizes() {  return (    <>      <Button size="sm">Small</Button>      <Button size="md">Medium</Button>      <Button size="lg">Large</Button>    </>  );}

Cuts

button-cuts.tsx

import { Button } from "@/components/zero/button";export default function ButtonCuts() {  return (    <>      <Button cut="end">End</Button>      <Button cut="start">Start</Button>      <Button cut="both">Both</Button>      <Button cut="none">None</Button>    </>  );}

With an icon, and disabled

button-icon.tsx

import { Button } from "@/components/zero/button";import { ArrowRightIcon, LockIcon } from "@/components/zero/icons";export default function ButtonIcon() {  return (    <>      <Button variant="secondary">        Next job        <ArrowRightIcon />      </Button>      <Button disabled>        <LockIcon />        Locked      </Button>    </>  );}

Behaviour

Pressing shrinks the slab in 70 ms and lets it spring back past its rest in 240 ms. Pointing at it sends a band of light across along the slant; there is no sheen on touch screens or when the system asks for reduced motion, and the press does not shrink then either.

Keyboard focus swaps the outline for the selection frame: yellow, with a dark gap inside it so it reads against the lime fill too.

Props

Button

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "danger" \| "ghost"	"primary"	The fill: the accent, a quiet charcoal, a dark slab outlined in danger, or nothing until pointed at.
size	"sm" \| "md" \| "lg"	"md"	32, 40 or 52 px tall. The label and an icon inside follow.
cut	"end" \| "start" \| "both" \| "none"	"end"	Which edges are cut on the slant. Two slabs cut on facing edges nest into each other.

Also takes every prop of Base UI's Button.