Button

Stripe Button

One primary per area in teal with white text; outline for secondary actions; ghost and link for quiet ones; destructive as red text on a light red fill. size="lg" is the 48px phone button. Corners follow --button-radius when an app sets it.

pnpm add @zikzuk/ui

import { Button } from "@zikzuk/ui";

Variants and sizes

When to use

Actions. Section-level actions are text links (SectionAction) instead.
Icon-only buttons need an aria-label.

Props

Prop	Type	Description
variant	"default" \| "outline" \| "secondary" \| "ghost" \| "link" \| "destructive" Default `"default"`	default is the teal primary.
size	"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" Default `"default"`	lg is 48px tall.
render	ReactElement	Render as another element (Base UI), e.g. a link.
…button props	ButtonHTMLAttributes	onClick, disabled, type…