Button
Displays a button or a component that looks like a button.
Default
The default button establishes the component's primary visual language before moving into implementation details.
tsx
<Button>Click me</Button>Installation
tsx
import { Button } from "madagent";Variants
Each variant is shown with its standard button and icon-bearing counterpart, which scales cleanly to other components that expose the same variant API.
Neutral
tsx
<div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
<Button variant="neutral">Neutral</Button>
<Button variant="neutral" icon={<Mail size={16} />}>
Neutral
</Button>
<Button
variant="neutral"
icon={<Mail size={16} />}
aria-label="Neutral action"
/>
</div>Secondary
tsx
<div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
<Button variant="secondary">Secondary</Button>
<Button variant="secondary" icon={<Mail size={16} />}>
Secondary
</Button>
<Button
variant="secondary"
icon={<Mail size={16} />}
aria-label="Secondary action"
/>
</div>Outline
tsx
<div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
<Button variant="outline">Outline</Button>
<Button variant="outline" icon={<Mail size={16} />}>
Outline
</Button>
<Button
variant="outline"
icon={<Mail size={16} />}
aria-label="Outline action"
/>
</div>Ghost
tsx
<div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
<Button variant="ghost">Ghost</Button>
<Button variant="ghost" icon={<Mail size={16} />}>
Ghost
</Button>
<Button
variant="ghost"
icon={<Mail size={16} />}
aria-label="Ghost action"
/>
</div>Danger
tsx
<div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
<Button variant="danger">Danger</Button>
<Button variant="danger" icon={<Mail size={16} />}>
Danger
</Button>
<Button
variant="danger"
icon={<Mail size={16} />}
aria-label="Danger action"
/>
</div>Sizes
tsx
<div style={{ display: "flex", gap: 12, alignItems: "center" }}>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
</div>Icon Only
tsx
<div style={{ display: "flex", gap: 12, alignItems: "center" }}>
<Button icon={<Mail size={16} />} aria-label="Send email" />
<Button
variant="outline"
icon={<Mail size={16} />}
aria-label="Send email"
/>
</div>Loading
tsx
<div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
<Button loading>Saving...</Button>
<Button variant="outline" loading>
Loading
</Button>
<Button variant="ghost" loading>
Loading
</Button>
<Button variant="danger" loading>
Deleting...
</Button>
</div>Full Width
tsx
<Button fullWidth>Full Width Button</Button>Disabled
tsx
<div style={{ display: "flex", gap: 12, alignItems: "center" }}>
<Button variant="secondary" disabled>
Disabled
</Button>
<Button variant="ghost" disabled>
Disabled
</Button>
</div>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary""neutral""secondary""outline""ghost""danger" | "primary" | Visual style variant |
size | "sm""md""lg" | "md" | Button size |
icon | ReactNode | - | Icon element rendered before the label |
loading | boolean | false | Shows a spinner and disables the button |
fullWidth | boolean | false | Makes the button take full container width |
disabled | boolean | false | Disables the button |
children | ReactNode | - | Button label. If omitted, icon is required (icon-only button) |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
Usage
tsx
<div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
<Button variant="primary">إرسال</Button>
<Button variant="secondary">إلغاء</Button>
<Button variant="outline" icon={<Mail size={16} />}>
إرسال بريد
</Button>
<Button loading>جاري التحميل...</Button>
</div>