Material Design 3 (Material You) components follow Google's latest design system with dynamic color, improved accessibility, and modern Android patterns. All components support light mode, dark mode, and size/state variants.
Navigation (18 components)
Top App Bars (6 variants)
- Small - 375×64px, compact standard app bar
- Medium - 375×112px, medium-height section headers
- Large - 375×152px, prominent top-level screens
- With Actions - 375×64px, menu/search/more icons
- With Back - 375×64px, back arrow navigation
- Search - 375×64px, search-focused app bar
Bottom Navigation & Navigation Drawer (6 variants)
- Bottom Nav / 3 Items - 375×80px, three destinations
- Bottom Nav / 4 Items - 375×80px, four destinations (most common)
- Bottom Nav / 5 Items - 375×80px, five destinations (maximum)
- Nav Drawer / Standard - 280×600px, side navigation drawer
- Nav Drawer / Modal - 280×600px, modal overlay drawer
- Nav Drawer / Rail - 80×600px, compact rail for desktop/tablet
Tabs (6 variants)
- Primary Tabs - 375×48px, text-only standard tabs
- Secondary Tabs - 375×48px, tabs with icons + text
- Icon Only Tabs - 375×48px, icon-only compact navigation
- Scrollable Tabs - 375×48px, horizontally scrollable
- Fixed 2 Tabs - 375×48px, two fixed tabs
- Fixed 3 Tabs - 375×48px, three fixed tabs
Buttons & FABs (12 components)
Buttons (8 variants)
- Filled - 343×40px, primary color fill, highest emphasis
- Filled Tonal - 343×40px, tonal fill, secondary emphasis
- Outlined - 343×40px, outline stroke, tertiary emphasis
- Text - auto×40px, text-only, low emphasis
- Elevated - 343×40px, raised surface with shadow
- Icon Filled - 40×40px, circular filled icon button
- Icon Outlined - 40×40px, circular outlined icon button
- Icon Standard - 40×40px, icon-only no background
FABs (4 variants)
- FAB / Regular - 56×56px, circular floating action button
- FAB / Small - 40×40px, compact FAB for secondary actions
- FAB / Large - 96×96px, hero FAB for primary screen action
- FAB / Extended - auto×56px, rounded rectangle with icon + text
Inputs & Selection (20 components)
Text Fields (8 variants)
- Filled - 300×56px, filled background with bottom line
- Outlined - 300×56px, outlined border
- Filled w/ Error - 300×72px, red error text below
- Outlined w/ Error - 300×72px, red border + error text
- Filled w/ Icon - 300×56px, leading icon (search, email)
- Outlined w/ Icon - 300×56px, leading icon variant
- Multiline - 300×120px, tall input for text areas
- Dropdown - 300×56px, trailing dropdown arrow
Chips (6 variants)
- Assist - auto×32px, suggestions and actions
- Filter - auto×32px, checkmark filter chip
- Input - auto×32px, input chip with close button
- Suggestion - auto×32px, quick suggestion chip
- Selected - auto×32px, selected state (filled)
- With Avatar - auto×32px, leading avatar image
Selection Controls (6 variants)
- Checkbox / Unchecked - 18×18px, empty checkbox
- Checkbox / Checked - 18×18px, checked with checkmark
- Checkbox / Indeterminate - 18×18px, dash for partial
- Radio / Unselected - 20×20px, empty radio button
- Radio / Selected - 20×20px, filled center dot
- Switch / Off - 52×32px, toggle switch (off state)
- Switch / On - 52×32px, toggle switch (primary color)
Cards & Lists (15 components)
Cards (9 variants)
- Elevated - 343×160px, elevated card with shadow (1dp)
- Filled - 343×160px, filled surface variant background
- Outlined - 343×160px, outlined border, no shadow
- Elevated w/ Image - 343×260px, image at top, content below
- Filled w/ Image - 343×260px, filled variant with image
- Outlined w/ Image - 343×260px, outlined variant with image
- With Header - 343×200px, prominent header section
- With Actions - 343×220px, action buttons at bottom
- With Media - 343×320px, large media + content + actions
Lists (6 variants)
- One Line - 343×56px, single line with text
- Two Line - 343×72px, primary + secondary text
- Three Line - 343×88px, primary + 2 secondary lines
- With Avatar - 343×56px, leading 40px avatar
- With Icon - 343×56px, leading 24px icon
- With Switch - 343×56px, trailing switch control
Dialogs & Sheets (11 components)
Dialogs (6 variants)
- Basic - 280×180px, simple dialog with OK button
- With Actions - 280×200px, Cancel/Confirm buttons
- With Icon - 280×220px, leading icon at top
- Full-Screen - 375×812px, full-screen modal dialog
- Alert - 280×180px, alert-style prominent title
- Simple - 280×200px, list of options
Bottom Sheets & Snackbars (5 variants)
- Bottom Sheet / Standard - 375×320px, with handle
- Bottom Sheet / Modal - 375×400px, with scrim overlay
- Bottom Sheet / Persistent - 375×280px, always visible
- Snackbar / Default - 343×48px, simple toast message
- Snackbar / With Action - 343×48px, with action button
Progress & Badges (10 components)
Progress Indicators (6 variants)
- Linear - 300×4px, horizontal determinate progress
- Linear Indeterminate - 300×4px, animated unknown duration
- Circular - 48×48px, circular determinate progress
- Circular Indeterminate - 48×48px, animated spinner
- Circular Small - 24×24px, inline loading
- Circular Large - 64×64px, full-screen loading
Badges (4 variants)
- Dot - 6×6px, small dot indicator
- Number - 16×16px, circle with number ("3")
- Large - 24×16px, elongated with text
- On Icon - 24×24px icon + 16×16px badge overlay
Design Specifications
Color System
- Primary - #6750A4 (light), #D0BCFF (dark)
- On Primary - #FFFFFF (light), #381E72 (dark)
- Primary Container - #EADDFF (light), #4F378B (dark)
- Secondary - #625B71 (light), #CCC2DC (dark)
- Tertiary - #7D5260 (light), #EFB8C8 (dark)
- Surface - #FEF7FF (light), #1C1B1F (dark)
- Surface Variant - #E7E0EC (light), #49454F (dark)
- Error - #BA1A1A (light), #FFB4AB (dark)
- Outline - #79747E (light), #938F99 (dark)
Typography
- Display Large - 57px regular (hero text)
- Headline Large - 32px regular (page titles)
- Title Large - 22px medium (section headers)
- Body Large - 16px regular (main content)
- Body Medium - 14px regular (secondary content)
- Label Large - 14px medium (buttons)
- Label Medium - 12px medium (chips, tabs)
- Label Small - 11px medium (badges, captions)
Elevation & Shape
- Elevation Levels - 0dp (flat), 1dp (cards), 3dp (FABs), 6dp (modals)
- Corner Radius - 8px (chips), 12px (cards), 16px (sheets), 20px (buttons), 28px (dialogs)
- State Layers - 8% hover, 12% pressed, 12% focus
- Container Heights - 40px (buttons), 48px (tabs), 56px (text fields), 64px (app bars)
Usage Guidelines
- Use Filled buttons for primary actions (highest emphasis)
- Use Filled Tonal buttons for secondary actions
- Use Outlined buttons for tertiary actions
- Use Text buttons for low-emphasis actions
- Maximum 5 bottom nav items (Material recommendation)
- Use Top App Bar / Large for top-level destinations
- Use Top App Bar / Small for secondary screens
- Use Navigation Rail for desktop/tablet layouts
- Use State layers (hover, pressed, focus) for interactive feedback
- Maintain 48px minimum touch targets (Material guideline)
- Use Chips for filtering, input, and actions
- Use Snackbars for brief, non-blocking feedback