2.0 KiB
2.0 KiB
UI Component Contracts
This document defines the strict API contracts for the standardized UI components.
Button Component
Description
A standard interactive button element that triggers an action.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant |
'primary' | 'secondary' | 'danger' | 'ghost' |
'primary' |
Visual style of the button. |
size |
'sm' | 'md' | 'lg' |
'md' |
Size of the button. |
isLoading |
boolean |
false |
If true, shows a spinner and disables interaction. |
disabled |
boolean |
false |
If true, prevents interaction. |
type |
'button' | 'submit' | 'reset' |
'button' |
HTML button type. |
onclick |
(event: MouseEvent) => void |
undefined |
Click handler. |
class |
string |
'' |
Additional CSS classes (use sparingly). |
Slots
default: The content of the button (text or icon).
Input Component
Description
A standard text input field with support for labels and error messages.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label |
string |
undefined |
Text label displayed above the input. |
value |
string |
'' |
The current value (bindable). |
placeholder |
string |
'' |
Placeholder text. |
error |
string |
undefined |
Error message displayed below the input. |
disabled |
boolean |
false |
If true, prevents interaction. |
type |
'text' | 'password' | 'email' | 'number' |
'text' |
HTML input type. |
Select Component
Description
A standard dropdown selection component.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label |
string |
undefined |
Text label displayed above the select. |
value |
string | number |
'' |
The selected value (bindable). |
options |
{ value: string | number, label: string }[] |
[] |
List of options to display. |
disabled |
boolean |
false |
If true, prevents interaction. |