Interactive Counter

Click buttons to update reactive state in real time.

Clicks: 0Added: 0Saved: 0

With Icons

Combine icons with text for clear, descriptive actions.

Text Only

Simple text labels for straightforward actions.

Common Patterns

Typical button combinations used in forms and dialogs.

Icon-Only

Compact icon buttons for toolbars and tight layouts.

Real-World Actions

Buttons styled for real application scenarios.

Usage

clickCount = 0// Text button<Button>Submit</Button>// With click handler<Button click={clickCount++}>Clicked {clickCount} times</Button>// With icon<Button click={save()}><Icon name="check" size="18" /> Save</Button>// Icon-only<Button><Icon name="heart" size="18" /></Button>

Props

PropTypeDescription
clickhandlerClick event handler
childrencontentButton label — text, icons, or both