101 lines
2.0 KiB
Markdown
101 lines
2.0 KiB
Markdown
# Button
|
|
|
|
Styled button with full DaisyUI support and reactive states.
|
|
|
|
## Tag
|
|
|
|
`Button`
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
| :--- | :--- | :--- | :--- |
|
|
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
|
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
|
| `loading` | `boolean \| Signal<boolean>` | `false` | Shows loading spinner |
|
|
| `badge` | `string \| Signal<string>` | `-` | Badge text displayed on corner |
|
|
| `badgeClass` | `string` | `'badge-secondary'` | Badge styling classes |
|
|
| `tooltip` | `string \| Signal<string>` | `-` | Tooltip text on hover |
|
|
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed before text |
|
|
| `onclick` | `function` | `-` | Click event handler |
|
|
| `type` | `string` | `'button'` | Native button type |
|
|
|
|
## Live Examples
|
|
|
|
### Basic Button
|
|
|
|
<div id="demo-basic"></div>
|
|
|
|
```javascript
|
|
Button({ class: "btn-primary" }, "Click Me")
|
|
```
|
|
|
|
### With Loading State
|
|
|
|
<div id="demo-loading"></div>
|
|
|
|
```javascript
|
|
const isSaving = $(false);
|
|
|
|
Button({
|
|
class: "btn-success",
|
|
loading: isSaving,
|
|
onclick: async () => {
|
|
isSaving(true);
|
|
await saveData();
|
|
isSaving(false);
|
|
}
|
|
}, "Save Changes")
|
|
```
|
|
|
|
### With Badge
|
|
|
|
<div id="demo-badge"></div>
|
|
|
|
```javascript
|
|
Button({
|
|
class: "btn-outline",
|
|
badge: "3",
|
|
badgeClass: "badge-accent"
|
|
}, "Notifications")
|
|
```
|
|
|
|
### With Tooltip
|
|
|
|
<div id="demo-tooltip"></div>
|
|
|
|
```javascript
|
|
Button({
|
|
class: "btn-ghost",
|
|
tooltip: "Delete item"
|
|
}, "Delete")
|
|
```
|
|
|
|
### Disabled State
|
|
|
|
<div id="demo-disabled"></div>
|
|
|
|
```javascript
|
|
const isDisabled = $(true);
|
|
|
|
Button({
|
|
class: "btn-primary",
|
|
disabled: isDisabled
|
|
}, "Submit")
|
|
```
|
|
|
|
### All Variants
|
|
|
|
<div id="demo-variants"></div>
|
|
|
|
```javascript
|
|
Div({ class: "flex flex-wrap gap-2" }, [
|
|
Button({ class: "btn-primary" }, "Primary"),
|
|
Button({ class: "btn-secondary" }, "Secondary"),
|
|
Button({ class: "btn-accent" }, "Accent"),
|
|
Button({ class: "btn-ghost" }, "Ghost"),
|
|
Button({ class: "btn-outline" }, "Outline")
|
|
])
|
|
```
|
|
```
|