Buttons, Dropdowns & Badges Design Studio

Compare minimal rectangular aesthetics across catalog, detail, and admin console components. Explore refined compact padding, micro corners, ghost outlines, and admin fulfillment pills.

✨ Multi-Style Presets 📐 Compact vs Dense Sizing ⚙️ Admin Console Elements Included ☕ Live In-Context Cards

1. Catalog Filters & Dropdown Controls

The catalog bar elements, multi-select popover triggers, active tag chips, and layout switcher.

Drawer Toggle

Multi-Select Triggers

Dropdown Menu & Options

Native select dropdown: Custom interactive pill dropdown (Live on roast pages):

Active Filter Tag Chips

Type: Single Origin Roast: Light, Medium Brew: Espresso

Layout View Switcher

2. Action & Call-to-Action Buttons

Main calls to action, form submissions, and secondary buttons with compact minimal scaling.

Quiz CTA Banner

Primary Actions

3. Product Option Selectors

Bag size selector buttons (12oz, 2lb, 5lb), grind choices, and purchase toggles.

Bag Sizes

Grind Options

Purchase Toggle

4. Status Badges & Nav Indicators

Roasting status labels, organic/FTO cert tags, and the fixed cart pill indicator.

Roasting Status

Just Hatched Incubating Mid-Molt FTO Organic

Cart Indicator

5. Admin Order Manager Console Elements

Private roaster dashboard controls from /order/admin/: filter pills, status badges, search input, and action buttons.

Total: 14 Pending: 3 Delivered: 8

Order Filters

Search Input

Semantic Badges

Received Roasted Ready for Pickup Delivered Delayed Cancelled

Save Action CTA

Queue Card Preview

#YWR-8912 2h ago

Sarah Jenkins · Local Delivery

2x Colombia Supremo (12oz, Whole Bean)

Received $32.00

6. In-Context Roast Card Mockups

How the minimal rectangular button and badge look on actual coffee cards in the catalog.

Just Hatched Chimney Sweep

Chimney Sweep

smoky, chocolate, dark cherry

$16.00

Incubating Early Bird

Early Bird

citrus, caramel, milk chocolate

$16.00

Recommended

Minimal Compact 4px Radius

Crisp 4px softened rectangle with balanced compact padding. Solves the bulky feeling.

Primary & Outline Button

Dropdown Filter Trigger

Product Size Selector

Catalog Badge

Just Hatched FTO

Admin Filter Pill & Status

All (14) Received (3) Received

Micro Slim 2px Radius

Ultra-dense, razor-sharp 2px corners with minimal footprint. Modern technical aesthetic.

Primary & Outline Button

Dropdown Filter Trigger

Product Size Selector

Catalog Badge

Just Hatched FTO

Admin Filter Pill & Status

All (14) Received (3) Received

Ghost Outline 4px Border

Delicate outline borders with light surfaces. Low visual weight that never dominates the layout.

Primary & Outline Button

Dropdown Filter Trigger

Product Size Selector

Catalog Badge

Just Hatched FTO

Admin Filter Pill & Status

All (14) Received (3) Received

Sharp Modernist 0px Radius

Pure right angles, Bauhaus geometry, architectural typography with crisp definition.

Primary & Outline Button

Dropdown Filter Trigger

Product Size Selector

Catalog Badge

Just Hatched FTO

Admin Filter Pill & Status

All (14) Received (3) Received

Soft Rounded 6px Radius

Gentle softened corners without turning into a capsule pill. Welcoming and approachable.

Primary & Outline Button

Dropdown Filter Trigger

Product Size Selector

Catalog Badge

Just Hatched FTO

Admin Filter Pill & Status

All (14) Received (3) Received

Classic Pill 999px Radius

Full capsule rounded ends from the original theme for direct side-by-side contrast.

Primary & Outline Button

Dropdown Filter Trigger

Product Size Selector

Catalog Badge

Just Hatched FTO

Admin Filter Pill & Status

All (14) Received (3) Received

A. Classic Pill 999px • Puffy

Full capsule rounded ends with generous padding.

Primary Actions

Filter Triggers

Admin Status Badges

Received Roasted

Bag Size Selector

B. Minimal Standard 4px • Generous

The original pill padding with 4px corners. Why it felt "too big" & bulky.

Primary Actions

Filter Triggers

Admin Status Badges

Received Roasted

Bag Size Selector

C. Sleek Compact 4px • Compact

Refined 4px corners with balanced compact padding. Clean & proportional.

Primary Actions

Filter Triggers

Admin Status Badges

Received Roasted

Bag Size Selector

D. Micro Slim 2px • Dense

Ultra-compact 2px micro corners with high-density spacing.

Primary Actions

Filter Triggers

Admin Status Badges

Received Roasted