natxocc/sigpro-ui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updateing Docs

Browse Source
This commit is contained in:
natxocc
2026-04-02 19:31:39 +02:00
parent 5a77deb442
commit f0c710f8c2
138 changed files with 25729 additions and 3918 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
docs/components/button.md
View File

@@ -1,53 +1,44 @@
> # Button(props, children?: string | Signal | [...]): HTMLElement
# Button
---
## 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 |
| 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'`) |
## Class Options
---
For more detailed information about the underlying styling system, visit the daisyUI documentation:
## Classes (daisyUI)
- [daisyUI Button](https://daisyui.com/components/button)
| 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 |
| 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 |
> 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
@@ -84,19 +75,32 @@ const LoadingDemo = () => {
$mount(LoadingDemo, "#demo-loading");
```
### With Badge
### 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 Button(
{
class: "btn-outline",
badge: "3",
badgeClass: "badge-accent",
},
"Notifications",
return Indicator(
{ value: "3", class: "badge-accent" },
Button({ class: "btn-outline" }, "Notifications"),
);
};
$mount(BadgeDemo, "#demo-badge");
@@ -108,36 +112,37 @@ $mount(BadgeDemo, "#demo-badge");
```javascript
const TooltipDemo = () => {
return Button(
{
class: "btn-ghost",
tooltip: "Delete item",
},
"Delete",
);
return Tooltip({ tip: "Delete item" }, Button({ class: "btn-ghost" }, "Delete"));
};
$mount(TooltipDemo, "#demo-tooltip");
```
### Disabled State
### Combined (Badge + Tooltip)
<div id="demo-disabled" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
<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 DisabledDemo = () => {
const isDisabled = $(true);
return Button(
{
class: "btn-primary btn-disabled",
},
"Submit",
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(DisabledDemo, "#demo-disabled");
$mount(CombinedDemo, "#demo-combined");
```
### All Variants
### 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>
@@ -153,16 +158,3 @@ const VariantsDemo = () => {
};
$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");
```