Component Library

Developer Reference

This page describes the reusable interface components used throughout FFFFinance. It is primarily useful for developers and contributors. If you are looking for help using the app, see the panels documentation instead.

FFFFinance uses a consistent set of interface building blocks across the entire app. Every button, input field, and search box follows the same design rules so the experience feels unified no matter which panel you are in.

Buttons

Buttons come in four styles and three sizes.

Styles

Style	When it's used
Primary	Main actions like "Save", "Connect", "Sync"
Secondary	Standard actions that are less prominent
Ghost	Subtle actions in toolbars and headers
Danger	Destructive actions like "Delete" or "Disconnect"

All buttons respond to your current theme -- colours, borders, and hover effects adapt automatically.

Sizes

Size	Where you'll see it
Small	Compact toolbars, inline actions
Medium	Most buttons throughout the app
Large	Prominent standalone actions

Buttons can include an icon alongside the label, or be icon-only (square shape) for toolbar actions. Icon-only buttons always have a screen-reader label for accessibility.

Loading State

When a button triggers an action that takes time (like syncing data), it shows a spinner and becomes temporarily disabled to prevent accidental double-clicks.

Text Inputs

Input fields are used for entering text, numbers, dates, and API keys throughout the app.

Features

Feature	Description
Labels	Optional label text above the field
Icons	Optional icon inside the field (left or right side)
Error state	Red border when validation fails
Disabled state	Greyed out and non-interactive

Input fields adapt to your theme and use the same font as the rest of the app.

Search

The search input is a pre-configured text field with a magnifying glass icon. It appears in panels like Transactions, Logs, and anywhere you need to filter content.

Features

• Magnifying glass icon automatically sized to match the input
• Clear button to reset the search
• Available in small, medium, and large sizes

Consistent Design

All components share these qualities:

• Theme-aware -- colours adapt to whichever theme you have selected
• Keyboard accessible -- visible focus rings when navigating with the keyboard
• Consistent sizing -- small, medium, and large options across all component types
• Responsive -- work well in panels of any size