Navigation
App Bar
Centered title with compact edge actions.
05 UI Components
Component Library
Reusable UI elements follow the brand palette, 12px control radius, compact spacing, and clear state changes.
Actions
Buttons
Primary, secondary, outlined, text, loading, disabled, full-width, rounded, and icon states.
Forms
Text Fields
Add the number of servings before saving.
Standard, private, focused, disabled, icon, and error states.
Forms
Selects
CategoryVegetables⌄
Dropdown fields use the same radius, border, label, and focus language as text inputs.
Navigation
Bottom Navigation
Five fixed tabs with selected and unselected states.
Surfaces
Cards
LightRecipe content
DarkPriority content
AccentHelpful tip
OutlinedGrouped item
Light, dark, accent, outlined, gradient, tappable, and custom-radius variants.
Filters
Chips
DinnerQuickVegetarianHigh protein ×
Selected, unselected, removable, and tappable states.
Controls
Icon Buttons
Primary, secondary, outlined, ghost, loading, and disabled states.
Feedback
Modal
Edit pantry item?
Confirm changes before updating your pantry.
Dialogs and bottom sheets use clear titles, short body copy, and paired actions.
Feedback
Toast
✓Recipe saved
!Could not save recipe
Snackbars confirm success or error without blocking the current screen.
System
State Pattern
DefaultReady for interaction
Hover / focusVisible border or lift
LoadingSpinner replaces label
ErrorRed border plus helper text
States stay visible through colour, shape, text, and spacing.
Variant Examples
Every standard state
Each component below shows its main variants and states as visual examples.
Buttons
Inputs
Cards
LightDefault surface
DarkHigh contrast
AccentWarm highlight
OutlinedGrouped content
GradientBrand surface
Chips
DefaultSelectedRemovable ×Focus
Icon Buttons
Navigation, Selects, and Feedback
FilterQuick meals⌄
✓Shopping list updated
Remove item?
This action needs confirmation.
Component Tokens
Variants, sizes, and states
These values define the visible component variants, dimensions, and interaction states.
| Component | Variants | Sizes / Radius | States |
|---|---|---|---|
| Button | primary, secondary, outlined, text | 36, 48, 56px high. Radius 12px or 100px rounded. | default, loading, disabled, full-width, left icon, right icon |
| Text field | standard, private | 12px radius. Padding 16px horizontal, 14px vertical. | default, focus, error, disabled, private visibility toggle |
| Select | dropdown field | 12px radius. Matches text field padding and border. | default, focus, selected, disabled |
| Card | light, dark, accent, outlined, gradient | 16px default radius. 16px default padding. | default, tappable, custom width, custom height, custom radius |
| Chip | selected, unselected | 8px radius. Padding 14px by 10px. | default, selected, removable, tappable |
| Icon button | primary, secondary, outlined, ghost | 48px default size. Icon uses 45% of button size. | default, loading, disabled, custom colour |
| Bottom navigation | fixed tab navigation | 10px horizontal padding, 8px vertical padding, 14px selected pill radius. | selected, unselected, route change |
| Modal | dialog, bottom sheet | Rounded surface with 16px plus internal spacing. | open, confirm, cancel, dismissed |
| Toast | success, error | Floating snackbar surface with compact icon and label. | shown, dismissed |