169 lines
6.1 KiB
Markdown
169 lines
6.1 KiB
Markdown
> # Button(props, children?: string | Signal | [...]): HTMLElement
|
|
|
|
---
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
| :----------- | :--------------------------- | :------------------ | :------------------------------- |
|
|
| `class` | `string` | `''` | Additional CSS classes (daisyUI) |
|
|
| `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 |
|
|
|
|
## Class Options
|
|
|
|
For more detailed information about the underlying styling system, visit the daisyUI documentation:
|
|
|
|
- [daisyUI Button](https://daisyui.com/components/button)
|
|
|
|
| Class Name | Category | Description |
|
|
| :-------------- | :------------ | :------------------------------------ |
|
|
| `btn-neutral` | `Color` 🎨 | Neutral brand color |
|
|
| `btn-primary` | `Color` 🎨 | Primary brand color |
|
|
| `btn-secondary` | `Color` 🎨 | Secondary brand color |
|
|
| `btn-accent` | `Color` 🎨 | Accent brand color |
|
|
| `btn-info` | `Color` 🎨 | Informational blue color |
|
|
| `btn-success` | `Color` 🎨 | Success green color |
|
|
| `btn-warning` | `Color` 🎨 | Warning yellow color |
|
|
| `btn-error` | `Color` 🎨 | Error red color |
|
|
| `btn-xl` | `Size` 📏 | Extra large scale |
|
|
| `btn-lg` | `Size` 📏 | Large scale |
|
|
| `btn-md` | `Size` 📏 | Medium scale (Default) |
|
|
| `btn-sm` | `Size` 📏 | Small scale |
|
|
| `btn-xs` | `Size` 📏 | Extra small scale |
|
|
| `btn-outline` | `Style` ✨ | Transparent with colored border |
|
|
| `btn-dash` | `Style` ✨ | Dashed border style |
|
|
| `btn-soft` | `Style` ✨ | Low opacity background color |
|
|
| `btn-ghost` | `Style` ✨ | No background, hover effect only |
|
|
| `btn-link` | `Style` ✨ | Looks like a text link |
|
|
| `btn-square` | `Shape` 📐 | 1:1 aspect ratio |
|
|
| `btn-circle` | `Shape` 📐 | 1:1 aspect ratio with rounded corners |
|
|
| `btn-wide` | `Shape` 📐 | Extra horizontal padding |
|
|
| `btn-block` | `Shape` 📐 | Full width of container |
|
|
| `btn-active` | `Behavior` ⚙️ | Forced active/pressed state |
|
|
| `btn-disabled` | `Behavior` ⚙️ | Visual and functional disabled state |
|
|
|
|
### Basic Button
|
|
|
|
<div id="demo-basic" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
|
|
|
```javascript
|
|
const BasicDemo = () => {
|
|
return Button({ class: "btn-primary" }, "Click Me");
|
|
};
|
|
$mount(BasicDemo, "#demo-basic");
|
|
```
|
|
|
|
### With Loading State
|
|
|
|
<div id="demo-loading" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
|
|
|
```javascript
|
|
const LoadingDemo = () => {
|
|
const isSaving = $(false);
|
|
|
|
return Button(
|
|
{
|
|
class: "btn-success",
|
|
loading: isSaving,
|
|
onclick: async () => {
|
|
isSaving(true);
|
|
await new Promise((resolve) => setTimeout(resolve, 2000));
|
|
isSaving(false);
|
|
},
|
|
},
|
|
"Save Changes",
|
|
);
|
|
};
|
|
$mount(LoadingDemo, "#demo-loading");
|
|
```
|
|
|
|
### With Badge
|
|
|
|
<div id="demo-badge" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
|
|
|
```javascript
|
|
const BadgeDemo = () => {
|
|
return Button(
|
|
{
|
|
class: "btn-outline",
|
|
badge: "3",
|
|
badgeClass: "badge-accent",
|
|
},
|
|
"Notifications",
|
|
);
|
|
};
|
|
$mount(BadgeDemo, "#demo-badge");
|
|
```
|
|
|
|
### With Tooltip
|
|
|
|
<div id="demo-tooltip" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
|
|
|
```javascript
|
|
const TooltipDemo = () => {
|
|
return Button(
|
|
{
|
|
class: "btn-ghost",
|
|
tooltip: "Delete item",
|
|
},
|
|
"Delete",
|
|
);
|
|
};
|
|
$mount(TooltipDemo, "#demo-tooltip");
|
|
```
|
|
|
|
### Disabled State
|
|
|
|
<div id="demo-disabled" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
|
|
|
```javascript
|
|
const DisabledDemo = () => {
|
|
const isDisabled = $(true);
|
|
|
|
return Button(
|
|
{
|
|
class: "btn-primary btn-disabled",
|
|
},
|
|
"Submit",
|
|
);
|
|
};
|
|
$mount(DisabledDemo, "#demo-disabled");
|
|
```
|
|
|
|
### All Variants
|
|
|
|
<div id="demo-variants" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
|
|
|
```javascript
|
|
const VariantsDemo = () => {
|
|
return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
|
|
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"),
|
|
]);
|
|
};
|
|
$mount(VariantsDemo, "#demo-variants");
|
|
```
|
|
|
|
<div id="demo-test" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
|
|
|
```javascript
|
|
const TestDemo = () => {
|
|
return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
|
|
$html("span", {class: "indicator"},[
|
|
5,
|
|
Button('Click')])
|
|
]);
|
|
};
|
|
$mount(TestDemo, "#demo-test");
|
|
```
|