Skip to content
Caps0.4.0
API reference

components/button

Import

Section titled “Import”
Import
import * as api from "@fungi.computer/caps/components/button";

Exports

Section titled “Exports”
Kind Export Description
type alias ButtonVariant Supported Button visual variants.
type alias ButtonSize Supported ButtonSize values.
type alias ButtonResult The outcome of a Button’s last action.
type alias ButtonProps Props accepted by Button.
type alias ButtonElement The native element type used by Button.
constant Button A reusable button with caller-controlled native behavior and intrinsic loading presentation.

ButtonVarianttype alias

Section titled “ButtonVariant”
Signature
type ButtonVariant =
  | "primary"
  | "secondary"
  | "accent"
  | "destructive"
  | "outline"
  | "ghost"
  | "ghost-destructive"
  | "link";

Supported Button visual variants.

ButtonSizetype alias

Section titled “ButtonSize”
Signature
type ButtonSize = "xs" | "sm" | "default" | "lg" | "icon" | "menubar";

Supported ButtonSize values.

ButtonResulttype alias

Section titled “ButtonResult”
Signature
type ButtonResult = "done" | "failed";

The outcome of a Button’s last action.

ButtonPropstype alias

Section titled “ButtonProps”
Signature
type ButtonProps = object & ButtonHTMLAttributes<HTMLButtonElement>;

Props accepted by Button.

Type Declaration

Section titled “Type Declaration”
Name Type Description
asChild? boolean -
loading? boolean -
result? ButtonResult The outcome of the last action. Becoming done plays a short beat: a check (and resultLabel) springs in, holds, then settles back to the label. Becoming failed shakes the label by the theme’s --stipe-motion-shake. Say what failed elsewhere, next to the action.
resultLabel? ReactNode What the done beat says, such as “Installed”. The button keeps the wider of its two labels, so nothing shifts.
onResultEnd()? () => void Called when the done beat has held long enough to read, just before it would settle back to the label. Replace the button here to hand off to what comes next (an “Installed” mark, an “Open” action).
size? ButtonSize -
variant? ButtonVariant -

ButtonElementtype alias

Section titled “ButtonElement”
Signature
type ButtonElement = ElementRef<"button">;

The native element type used by Button.

Buttonconstant

Section titled “Button”
Signature
const Button: ForwardRefExoticComponent<
  object &
    ButtonHTMLAttributes<HTMLButtonElement> &
    RefAttributes<HTMLButtonElement>
>;

A reusable button with caller-controlled native behavior and intrinsic loading presentation.