Button
The primary action. A capsule by default (squared on request), with six looks, four tones and five sizes. Presses scale down slightly; loading keeps the width.
import { Button } from "pleate/button";Variants
From the strongest (filled) to the quietest (plain).
Tones
Accent follows the palette; danger and success are fixed semantic colors.
Sizes and shapes
Icons, loading, disabled
Full width
The bottom of a phone sheet or form.
Props
- variant
Visual weight. "soft" is an alias of "tinted".
"filled" | "tinted" | "gray" | "surface" | "outline" | "plain"default "filled"- tone
Color role.
"accent" | "neutral" | "danger" | "success"default "accent"- size
Height, padding and type size.
"xs" | "sm" | "md" | "lg" | "xl"default "md"- shape
Capsule (default) or rounded rectangle.
"pill" | "rounded"default "pill"- loading
Spinner in place of the content; the button is disabled and aria-busy.
booleandefault false- startIcon / endIcon
Icons sized automatically.
ReactNode- fullWidth
Stretch to the container.
booleandefault false- asChild
Style your own element (Next <Link>, <a>).
booleandefault false
Accessibility
- Renders a native <button type="button">.
- Focus ring on keyboard focus only.
- loading sets aria-busy and disables presses.