Core Elements
Button
The main action trigger, in 10 variants, 2 shapes and 5 sizes.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import { Button, ButtonCell, ButtonGroup } from "@wunderui/react"Examples
Main and secondary
The main action next to a quieter one.
Dark
A dark button for a confirming action.
Light
White with brand text, for colored or dark surfaces.
With icon
An icon before the label confirms the state.
With controls
Minus and plus inside the button change the quantity.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Login card
A social sign-in button, a divider, the main action and a link.
Create account
Cancel and create side by side in the footer.
Verification code
The main button stays disabled until the code is complete, with a link to resend.
Delete modal
A destructive action next to a plain cancel.
Check email
A main action with a quieter secondary one below it.
API Reference
| Prop | Type | Default |
|---|---|---|
| variant | "plain" | "primary" | "brand" | "gradient" | "dark" | "light" | "outline" | "ghost" | "destructive" | "link" | "primary" |
| shape | "rounded" | "pill" | "rounded" |
| size | "sm" | "md" | "lg" | "xl" | "2xl" | "md" |
| disabled | boolean | false |
| render | ReactElement | — |