161 lines
4.7 KiB
Markdown
161 lines
4.7 KiB
Markdown
# Button
|
||
|
||
---
|
||
|
||
## Props
|
||
|
||
| Prop | Type | Description |
|
||
| :--------- | :--------------------------- | :----------------------------------------------------- |
|
||
| `class` | `string` | Additional CSS classes |
|
||
| `loading` | `boolean \| Signal<boolean>` | Shows a spinner and disables the button |
|
||
| `disabled` | `boolean \| Signal<boolean>` | Disabled state |
|
||
| `icon` | `string \| VNode \| Signal` | Icon displayed before the text |
|
||
| `onclick` | `function` | Click event handler |
|
||
| `type` | `string` | Native button type (`'button'`, `'submit'`, `'reset'`) |
|
||
|
||
---
|
||
|
||
## Classes (daisyUI)
|
||
|
||
| Category | Keywords | Description |
|
||
| :--- | :--- | :--- |
|
||
| Color | `btn-primary`, `btn-secondary`, `btn-accent`, `btn-ghost`, `btn-info`, `btn-success`, `btn-warning`, `btn-error` | Visual color variants |
|
||
| Size | `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl` | Button scale |
|
||
| Style | `btn-outline`, `btn-soft`, `btn-dash`, `btn-link` | Visual style variants |
|
||
| Shape | `btn-circle`, `btn-square`, `btn-wide`, `btn-block` | Button shape |
|
||
| State | `btn-active`, `btn-disabled` | Forced visual states |
|
||
|
||
> SigProUI supports styling via daisyUI independently or combined with the `ui` prop.
|
||
> For further details, check the [daisyUI Button Documentation](https://daisyui.com/components/button) – Full reference for CSS classes.
|
||
|
||
### Example
|
||
|
||
```javascript
|
||
Button({ class: "btn-primary btn-lg btn-circle gap-4"}, "Click Me");
|
||
// Applies: primary color, large size, circular shape
|
||
// class is any css class from pure css or favorite framework
|
||
```
|
||
|
||
---
|
||
|
||
## Examples
|
||
|
||
### 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 Icon
|
||
|
||
<div id="demo-icon" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||
|
||
```javascript
|
||
const IconDemo = () => {
|
||
return Button(
|
||
{
|
||
class: "btn-primary",
|
||
icon: "⭐",
|
||
},
|
||
"Favorite",
|
||
);
|
||
};
|
||
Mount(IconDemo, "#demo-icon");
|
||
```
|
||
|
||
### With Badge (using Indicator)
|
||
|
||
<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 Indicator(
|
||
{ value: "3", class: "badge-accent" },
|
||
Button({ class: "btn-outline" }, "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 Tooltip({ tip: "Delete item" }, Button({ class: "btn-ghost" }, "Delete"));
|
||
};
|
||
Mount(TooltipDemo, "#demo-tooltip");
|
||
```
|
||
|
||
### Combined (Badge + Tooltip)
|
||
|
||
<div id="demo-combined" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||
|
||
```javascript
|
||
const CombinedDemo = () => {
|
||
const count = $(0);
|
||
return Tooltip(
|
||
{ tip: () => `${count()} likes` },
|
||
Indicator(
|
||
{ value: count, class: "badge-accent" },
|
||
Button(
|
||
{
|
||
class: "btn-primary btn-lg",
|
||
icon: "👍",
|
||
onclick: () => count(count() + 1),
|
||
},
|
||
"Like",
|
||
)
|
||
),
|
||
);
|
||
};
|
||
Mount(CombinedDemo, "#demo-combined");
|
||
```
|
||
|
||
### All Color 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");
|
||
```
|