Components
Button
Interactive button with multiple variants, sizes, and icon support.
Button
A versatile button component with multiple visual variants, size options, and icon composition.
Import
import { Button } from '@mks2508/mks-ui/react';Basic Usage
Basic Usage
.tsx
<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="destructive">Destructive</Button>Variants & Sizes
Button
Disabled
Disabled
.tsx
<Button disabled>Disabled</Button>asChild Composition
Render as another element while preserving Button styles:
<Button asChild>
<a href="/docs">Go to Docs</a>
</Button>Slot Overrides
Slot Overrides
.tsx
<Button
slots={{
root: 'bg-gradient-to-r from-cyan-500 to-fuchsia-600 border-0',
icon: 'text-white',
}}
>
Gradient Button
</Button>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive' | 'default' | Visual style variant |
size | 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'default' | Size preset |
asChild | boolean | false | Merge props onto child element |
disabled | boolean | false | Disable interactions |
slots | SlotOverrides<ButtonSlot> | — | Style overrides per slot |
className | string | — | Additional CSS classes |
children | ReactNode | — | Button content |
Slots
| Slot | Description |
|---|---|
root | The button container element |
icon | Icon wrapper elements |