Component reference
Button
Actions with consistent tone, appearance and interaction states.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import { Button } from "@pimolu/react";
export function ButtonExample() {
const [count, setCount] = useState(0);
return (
<div className="space-y-6">
<div className="flex flex-wrap gap-3">
<Button onClick={() => setCount(count + 1)}>Add a little progress</Button>
<Button
disabled
>
Unavailable
</Button>
</div>
<p role="status">{count} step{count === 1 ? "" : "s"} forward.</p>
</div>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Variants
Semantic meaning carried by each button tone.
Appearances
The same semantic tone, from solid to fully transparent.
Sizes
A consistent scale from xs to xxl.
Usage
Use Button for an action and Link for navigation. The default button type is button; set type=submit deliberately inside a form.
The example enumerates appearances from buttonVariantMap. loading disables the control and announces aria-busy; provide text that still explains the action.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
ButtonProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
loading | boolean | undefined | false | Show the busy state and prevent activation. |
startIcon | ReactNode | — | Decorative content before the label or input. |
endIcon | ReactNode | — | Decorative content after the label or input. |
fullWidth | boolean | undefined | false | Use the available width of the parent. |
iconOnly | boolean | undefined | false | Render an icon-only action. Provide an accessible name with aria-label. |
disabled | boolean | undefined | — | Standard React/HTML attribute. |
name | string | undefined | — | Standard React/HTML attribute. |
type | "submit" | "reset" | "button" | undefined | "button" | Standard React/HTML attribute. |
value | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | "" | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onChange | ChangeEventHandler<HTMLButtonElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLButtonElement> | undefined | — | Standard React/HTML attribute. |
variant | "primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefined | "primary" | Variant exposed by this component. |
appearance | "solid" | "soft" | "outline" | "ghost" | "link" | "dashed" | "glass" | "elevated" | "glow" | "text" | undefined | "solid" | Visual treatment of the control or surface. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefined | "md" | Component size. |
radius | "sm" | "md" | "lg" | "none" | "full" | undefined | "md" | Corner-radius treatment. |
loadingboolean | undefinedDefault: false
Show the busy state and prevent activation.
startIconReactNodeNo default extracted.
Decorative content before the label or input.
endIconReactNodeNo default extracted.
Decorative content after the label or input.
fullWidthboolean | undefinedDefault: false
Use the available width of the parent.
iconOnlyboolean | undefinedDefault: false
Render an icon-only action. Provide an accessible name with aria-label.
disabledboolean | undefinedNo default extracted.
Standard React/HTML attribute.
namestring | undefinedNo default extracted.
Standard React/HTML attribute.
type"submit" | "reset" | "button" | undefinedDefault: "button"
Standard React/HTML attribute.
valuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedDefault: ""
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onChangeChangeEventHandler<HTMLButtonElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLButtonElement> | undefinedNo default extracted.
Standard React/HTML attribute.
variant"primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefinedDefault: "primary"
Variant exposed by this component.
appearance"solid" | "soft" | "outline" | "ghost" | "link" | "dashed" | "glass" | "elevated" | "glow" | "text" | undefinedDefault: "solid"
Visual treatment of the control or surface.
size"xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefinedDefault: "md"
Component size.
radius"sm" | "md" | "lg" | "none" | "full" | undefinedDefault: "md"
Corner-radius treatment.
Accessibility
- Keep a visible label, or give an icon-only action an aria-label.
- Disabled and loading controls cannot be activated. Do not put essential explanations only on a disabled control.