FLIN App

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

Prop	Type	Description
`click`	handler	Click event handler
`children`	content	Button label — text, icons, or both

Button

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Interactive Counter

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } With Icons

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Text Only

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Common Patterns

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Icon-Only

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Real-World Actions

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Usage

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Props