Button
Triggers actions and navigations. Five hierarchies, three sizes, five states, icon-only, file upload, and loading variants.
import
{ Button } from "@pepulux/ui"Hierarchy — Primary / Secondary / Tertiary / Link color / Link gray
Destructive variant
Sizes — sm / md / lg
States — Default / Disabled / Loading (per hierarchy)
primary
secondary
tertiary
links
Buttons with icons — leftIcon / rightIcon
Icon button — Icon only=True
Loading state — toggle to see transition
Loading:
falseFile upload button
As link — asChild + anchor
Full width
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "tertiary" | "link-color" | "link-gray" | "destructive" | "ghost" | "primary" | Figma Hierarchy — Primary | Secondary | Tertiary | Link color | Link gray | Destructive |
| size | "sm" | "md" | "lg" | "xs" | "xl" | "icon" | "md" | Height — sm 36px | md 40px | lg 44px |
| loading | boolean | false | Figma State=Loading — replaces content with spinner, disables interaction |
| disabled | boolean | false | Figma State=Disabled — dims and blocks clicks |
| leftIcon | ReactNode | — | Icon before label. Pass alone (no children) for Icon only=True |
| rightIcon | ReactNode | — | Icon after label |
| asChild | boolean | false | Renders as child via Radix Slot — use to wrap <a>, <label>, etc. |
| className | string | — | Extra Tailwind classes — e.g. w-full for full-width |