The Button component is a versatile, accessible button element that supports multiple variants, sizes, shapes, and states. It provides a consistent design system for all interactive elements in your application.
import { Button } from '@dashflowx/core'export default function ButtonExample() {return (<Button variant="primary" size="md">Click me</Button>)}
Preview:
| Prop | Type | Default | Description |
|---|---|---|---|
variant | ButtonVariant | 'primary' | Visual style variant of the button |
size | ButtonSize | 'md' | Size of the button component |
shape | ButtonShape | 'default' | Shape and border radius of the button |
disabled | boolean | false | Whether the button is disabled |
loading | boolean | false | Shows loading spinner and disables button |
fullWidth | boolean | false | Makes button take full width of container |
icon | ReactNode | - | Icon to display in the button |
iconPosition | 'left' | 'right' | 'left' | Position of the icon relative to text |
type | 'button' | 'submit' | 'reset' | 'button' | HTML button type attribute |
href | string | - | Makes button render as a link |
target | string | - | Target attribute for link buttons |
rel | string | - | Rel attribute for link buttons |
className | string | '' | Additional CSS classes |
Default button with solid blue background and white text.
<Button variant="primary" size="md">Primary Button</Button>
Secondary button with gray background and white text.
<Button variant="secondary" size="md">Secondary Button</Button>
Button with transparent background and bordered outline.
<Button variant="outline" size="md">Outline Button</Button>
Button with transparent background and no border.
<Button variant="ghost" size="md">Ghost Button</Button>
Button for dangerous actions with red styling.
<Button variant="destructive" size="md">Delete</Button>
Button for positive actions with green styling.
<Button variant="success" size="md">Save Changes</Button>
Button for cautionary actions with orange styling.
<Button variant="warning" size="md">Proceed with Caution</Button>
Button for informational actions with blue styling.
<Button variant="info" size="md">Learn More</Button>
Button with light background and dark text.
<Button variant="light" size="md">Light Button</Button>
Button with dark background and light text.
<Button variant="dark" size="md">Dark Button</Button>
Button with beautiful gradient background.
<Button variant="gradient" size="md">Gradient Button</Button>
Button with glassmorphism effect.
<Button variant="glass" size="md">Glass Button</Button>
Button with neon glow effect.
<Button variant="neon" size="md">Neon Button</Button>
Button with soft, muted styling.
<Button variant="soft" size="md">Soft Button</Button>
Button with prominent border styling.
<Button variant="bordered" size="md">Bordered Button</Button>
Compact size for tight spaces.
<Button variant="primary" size="xs">XS Button</Button>
Small size for secondary actions.
<Button variant="primary" size="sm">Small Button</Button>
Standard size for most use cases.
<Button variant="primary" size="md">Medium Button</Button>
Large size for prominent actions.
<Button variant="primary" size="lg">Large Button</Button>
Extra large size for hero sections.
<Button variant="primary" size="xl">XL Button</Button>
Massive size for maximum impact.
<Button variant="primary" size="2xl">2XL Button</Button>
Standard rounded corners.
<Button variant="primary" size="md" shape="default">Default Shape</Button>
More rounded corners for a softer look.
<Button variant="primary" size="md" shape="rounded">Rounded Shape</Button>
Fully rounded for a pill-like appearance.
<Button variant="primary" size="md" shape="pill">Pill Shape</Button>
Sharp corners for a modern look.
<Button variant="primary" size="md" shape="square">Square Shape</Button>
Perfect circle for icon-only buttons.
<Button variant="primary" size="md" shape="circle">⭐</Button>
Button that cannot be interacted with.
<Button variant="primary" size="md" disabled>Disabled Button</Button>
Button with loading spinner and disabled state.
<Button variant="primary" size="md" loading>Loading...</Button>
Button that takes the full width of its container.
<Button variant="primary" size="md" fullWidth>Full Width Button</Button>
Button for form submission.
<Button variant="primary" size="md" type="submit">Submit Form</Button>
Button for form reset.
<Button variant="secondary" size="md" type="reset">Reset Form</Button>
Button that renders as a link.
<Button variant="outline" size="md" href="/docs">Go to Docs</Button>
<Button variant="primary" size="md" icon="🚀" iconPosition="left">Launch App</Button>
<Button variant="primary" size="md" shape="circle" icon="⚙️"></Button>
<Button variant="gradient" size="lg" shape="pill">Get Started</Button>
<Button variant="glass" size="xl" shape="rounded">Explore Features</Button>
<Button variant="neon" size="lg" className="shadow-2xl">Neon Glow</Button>
<Button variant="primary" size="lg">Create Account</Button>
<Button variant="secondary" size="md">Learn More</Button>
<div className="flex gap-2"><Button variant="primary" type="submit">Save Changes</Button><Button variant="outline" type="reset">Cancel</Button></div>
<Button variant="ghost" href="/dashboard">Go to Dashboard</Button>
<Button variant="destructive" size="md">Delete Account</Button>
- Use
primaryfor main actions - Use
secondaryfor alternative actions - Use
outlinefor subtle emphasis - Use
ghostfor minimal styling - Use
destructivefor dangerous actions - Use
successfor positive actions - Use
warningfor cautionary actions - Use
infofor informational actions - Use
light/darkfor theme variations - Use
gradientfor eye-catching elements - Use
glassfor modern interfaces - Use
neonfor futuristic designs - Use
softfor gentle interactions - Use
borderedfor structured layouts
- Use
xsfor tight spaces and icons - Use
smfor secondary actions - Use
mdfor standard buttons - Use
lgfor prominent actions - Use
xlfor hero sections - Use
2xlfor maximum impact
- Use
defaultfor standard interfaces - Use
roundedfor softer designs - Use
pillfor modern aesthetics - Use
squarefor structured layouts - Use
circlefor icon-only buttons
- Always provide loading states for async actions
- Disable buttons during processing
- Use appropriate button types for forms
- Consider full-width for mobile-first designs
- Ensure sufficient color contrast for all variants
- Provide loading states for better UX
- Use semantic button types
- Include proper ARIA labels for icon-only buttons