Button
Clickable elements for triggering actions with multiple visual variants and sizes
Overview
The Button component provides clickable elements with consistent styling across your application. It supports seven visual variants for different use cases, five size options including icon-specific sizes, and automatic styling for icons and disabled states.
Import
import { Button } from "@px-ui/core";Usage
<Button>Click me</Button>Examples
Variants
The Button component supports seven visual variants to match different contexts and hierarchies in your interface.
<Button variant="default">Default</Button>
<Button variant="primary">Primary</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="primary-outline">Primary Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>Sizes
Buttons can be rendered in five different sizes, including specialized sizes for icon-only buttons.
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon-sm">
<ArrowRightIcon />
</Button>
<Button size="icon">
<ArrowRightIcon />
</Button>With Icons
Buttons automatically handle icon spacing and sizing when SVG icons are included as children.
<Button>
<ArrowRightIcon />
Next
</Button>
<Button variant="primary">
<SendIcon />
Send Email
</Button>
<Button variant="outline">
Download
<DownloadIcon />
</Button>Disabled State
All button variants include distinct disabled state styling.
<Button disabled>Default Disabled</Button>
<Button variant="primary" disabled>
Primary Disabled
</Button>
<Button variant="destructive" disabled>
Destructive Disabled
</Button>
<Button variant="outline" disabled>
Outline Disabled
</Button>
<Button variant="ghost" disabled>
Ghost Disabled
</Button>API Reference
Button
A styled button component with variant and size customization.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "primary" | "destructive" | "outline" | "primary-outline" | "ghost" | "link" | "default" | Visual style variant of the button |
size | "default" | "sm" | "lg" | "icon-sm" | "icon" | "default" | Size of the button. Use icon-sm or icon for icon-only buttons |
className | string | - | Additional CSS classes |
Inherited Props: Inherits all props from native HTML button element including onClick, disabled, type, etc.