Components
Live demos rendered from the real @generators/core library, never a redraw. Each component documents anatomy, variants, every interaction state, props, accessibility, and a copy-ready snippet. Always reach for a generator before hand-rolling a native element.
Component Index 143 core · 87 feature
GenerateButton
GenerateInput
GenerateBadge
GenerateSelect
GenerateSwitch
GenerateCheckbox
GenerateTooltip
GenerateSelectCustom
Deep Dive · GenerateButton
GenerateButton
StableAnatomy
＋1New Event32
1 Leading icon (optional)
2 Container · preset + variant
3 Label, always Title Case
Variants · Live
Rendered from @generators/core
States
default
:hover
:focus
[disabled]
loading
fullWidth
Props
| Prop | Type | Default |
|---|---|---|
preset | basic | standard | basic |
variant | contained | empty | contained |
useFullWidth | boolean | true |
isLoading | boolean | false |
onClick | fn | , |
Usage
// Inline pill, not full width
<GenerateButton
preset="standard"
useFullWidth={false}
onClick={save}
>
Save Changes
</GenerateButton>Accessibility
Native <button>; focus ring uses --accent-ring (3px, AA). Loading sets aria-busy. Min target 44×44.
Guidelines
✓ Do
One primary action per view. Lead the label with a verb in Title Case.
✕Don't
Stack multiple primaries. Pass useFullWidth for pills inside a toolbar.
Deep Dive · GenerateInput
GenerateInput
StableStates · Live
Rendered from @generators/core
Organization Name
Contact Email
Please Enter A Valid Email.
Read Only
Props
| Prop | Type | Note |
|---|---|---|
useInputMode | wrapped | Admin default |
inputClassName | string | .gen-input wrapper |
errorMsg | string | Shows + reddens |
value/onChange | controlled | RHF Controller |
Accessibility
Label bound via htmlFor; error wires aria-invalid + aria-describedby.
More Live Primitives badge · switch · checkbox · select · tooltip
All rendered from @generators/core
Success
Warning
Error
Info
Notifications
Plan Tier