Button
The core button component. Built with Radix UI Slot and class-variance-authority for consistent variant/size management.
Import
import { Button } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Button";Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "blue" | "green" | "transparent" | "grey" | "edit" | "add" | "delete" | — | "default" | Visual style variant |
size | "default" | "sm" | "lg" | "icon" | — | "default" | Size preset |
isLoading | boolean | — | false | Shows spinner and disables the button |
onlyIcon | boolean | — | false | Icon-only mode (no label) |
iconStart | ReactNode | — | — | Icon rendered before the label |
iconEnd | ReactNode | — | — | Icon rendered after the label |
asChild | boolean | — | false | Renders as child element via Radix Slot (e.g. wrap a <Link>) |
parentClassName | string | — | — | Class on the wrapper div |
loaderStylingClass | string | — | — | Class applied to the spinner |
Plus all standard HTML <button> attributes.
Usage
Variants
<Button variant="default">Save</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Cancel</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="add">Add Item</Button>
<Button variant="edit">Edit</Button>
<Button variant="delete">Remove</Button>Related
- Dialog — uses Button for close/action
- Boolean Toggle — uses Button internally
Last updated on