Component
Button
The primary interactive element. Buttons trigger actions, submit forms, and navigate users. Every button carries a hard shadow and snaps on press.
Variants
All variants at medium size
tsx
<Button variant="primary">Primary</Button>
<Button variant="danger">Danger</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="outline">Outline</Button>
Sizes
Small, medium, and large
tsx
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
States
Disabled
Disabled buttons have reduced opacity and no interaction
tsx
<Button disabled>Disabled Primary</Button>
<Button variant="danger" disabled>Disabled Danger</Button>
<Button variant="outline" disabled>Disabled Outline</Button>
Loading
Loading state shows a square spinner
tsx
<Button loading>Loading...</Button>
<Button variant="danger" loading>Processing</Button>
Effects
Optional hover and visual effects
tsx
<Button effect="slide">Slide Text</Button>
<Button effect="pulse">Pulse Effect</Button>
Full Width
Button stretches to fill the container
tsx
<Button fullWidth size="lg">Full Width CTA</Button>
<Button variant="outline" fullWidth>Full Width Outline</Button>
Variant × Size Matrix
Every variant at every size
Usage
App.tsx
import { Button } from 'starkit-ui';
import 'starkit-ui/styles';
function App() {
return (
<form onSubmit={handleSubmit}>
<Button
variant="primary"
size="lg"
loading={isSubmitting}
fullWidth
>
Create Account
</Button>
</form>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'primary' | 'danger' | 'ghost' | 'outline' | 'primary' | Visual style of the button. |
| size | 'sm' | 'md' | 'lg' | 'md' | Size preset controlling padding and font size. |
| disabled | boolean | false | Disables the button and prevents interaction. |
| loading | boolean | false | Shows a spinner and disables interaction. |
| effect | 'slide' | 'pulse' | 'none' | 'none' | Adds hover or visual animation effects. |
| fullWidth | boolean | false | Stretches the button to fill its container. |
| prefixIcon | ReactNode | — | Content rendered before the button label. |
| suffixIcon | ReactNode | — | Content rendered after the button label. |
| className | string | '' | Additional CSS classes to merge. |
All standard <button> HTML attributes are also supported via ButtonHTMLAttributes.