Button Design Explorer

The main action button. The one that says "do the thing." This is the anchor — every other button type builds from its shape language.

The supporting action. Always visually quieter than the primary CTA. Should feel like it belongs alongside the primary without competing.

Buttons you tap to choose something. They have a default state, a hover state, and a "selected" state. Click any to see the selected state.

Small buttons used in rows for filtering (vault types, seed types) or switching modes. Click to toggle active states. Also includes the on/off switch.

Buttons that live in the top nav bar or as section-level calls to action. Smaller than primary CTAs. Often link to other pages.

Small icon-only buttons for utility actions, plus the larger floating action buttons (FABs) that live at the bottom of pages.

Actions that remove or destroy something. Always muted by default — they should feel deliberate, not accidentally clickable. In DandyLine language: "Compost," not "Delete."

Tiny clickable labels. Used for feeling tags during planting ("Happy", "Grateful"), seed type filters, and status indicators. Click to toggle.

Every button type should come in consistent sizes. Here's the proposed scale using the P1 pill style as an example. The same padding ratios would apply to all types.

How individual Gardeners are represented across the app. Used in contributor lists, vault details, stacked groups, and the Gardener profile. Your preference: solid-color circles (screenshot 3) over the ring style.

Larger interactive cards with icons. Used for choosing seed type (Photo, Video, Voice Note), selecting bloom triggers (Specific Date, Age Milestone), and picking vaults with jar details. Click to see selected states.

Grouped toggle buttons where exactly one option is active at a time. Used for vault privacy settings, view modes, and any either/or choice. Three shape variants to match the shape direction you choose.

The main app navigation bar from the homepage. Four tabs with the oversized gold Plant button in the center as the primary CTA. This is iconic — the big gold circle should always be the most enticing element on screen.

The dashboard-level components from the homepage: vault counters at the top, the next-bloom countdown, compost warnings, and weather update cards. These are more "display components" than buttons, but their styling needs to match.

How different button types work together in real UI situations. This is where consistency matters most — primary + secondary side by side, toggles + CTA, etc.