UI component specifications with variants, states, sizes, and usage guidance.
Medium-emphasis buttons for secondary actions. Uses shadow to lift from surface.
Highest emphasis for important, final actions. Use for primary CTAs like Save, Submit.
Medium-high emphasis, between filled and outlined. Good for secondary CTAs like Next.
Medium emphasis with outline border. Use for important but non-primary actions.
Lowest emphasis. Use for tertiary actions, dialog dismissals, in-line text actions.
Compact button for supplementary actions (favorites, bookmarks, menus).
High-emphasis icon button. Used for important togglable actions.
Medium emphasis icon button with tonal fill. More emphasis than standard.
Medium emphasis icon button with outline. Good for toggle states.
Primary screen action. Most prominent button on the screen.
FAB variant with icon + text label. Use when icon alone is insufficient.
Group of 2-5 segments for selection. Can be single or multi-select.
A container that groups related buttons together with dividers, enabling related actions to be presented as a unified control.
An expandable floating action button that reveals a menu of related actions, providing quick access to a set of primary actions.
Default card style with shadow. Use for content on the base surface.
Subtle, tonal fill. Use when cards sit on a non-default surface.
Flat card with outline. Provides visual boundary without elevation.
Represents smart actions based on context (e.g., 'Share', 'Add to calendar').
Used to narrow content through selection. Shows checkmark when selected.
Represents user input as a discrete element (emails, tags). Can have avatars.
Dynamically generated suggestions (search, message replies).
Bottom navigation for 3-5 primary destinations on mobile.
Vertical navigation for medium-width screens (tablets, narrow desktop).
Side panel for app navigation. Standard (persistent) or modal (overlay).
Contains title, navigation, and actions at the top of the screen.
Provides access to navigation and key actions at the bottom.
Default text input. Container fill signals interactivity.
Text input with visible outline. Use when surface has a tonal fill already.
Dropdown selection field with filled or outlined variants.
Text field with suggestion list that filters as you type.
Select one or more items from a list, or toggle an option on/off.
Select exactly one option from a group.
Toggle a single item on or off immediately.
Select a value or range from a continuous or discrete set.
Checkbox supporting checked, unchecked, and indeterminate states.
Select a value range with two thumbs.
Interruptive overlay requiring user decision or acknowledgement.
Full-screen modal for complex tasks (compose email, edit settings).
Modal dialog for critical decisions or simple confirmations.
Surface anchored to bottom. Standard (coexists with content) or modal (blocks).
Surface anchored to the side. For supplementary content on larger screens.
Brief message at bottom about app process. Auto-dismisses.
Circular indicator for indeterminate or determinate progress.
Horizontal bar showing progress. Full-width or contained.
Indicator for notifications, status, or count on icons/text.
Low-emphasis message with optional actions, anchored to content.
Brief, single-line label on hover/long-press. No actions.
Multi-line with title, description, and optional actions.
Calendar-based date selection. Docked, modal, or modal input variants.
Select time via dial (touch) or input (keyboard) mode.
Select a start and end date within a range.
Date picker presented in a dialog with confirm/dismiss actions.
Text input mode for time selection.
Dropdown list of choices on a temporary surface.
Continuous vertical grouping of text/images.
Single list row with leading/trailing content and 1–3 lines.
Top-level navigation between key content areas.
Sub-categorization within a section.
Full-width search input. Tap expands to search view.
Expanded search with suggestions, results, and history.
Search bar anchored within content; expands to show results.
Thin line separating content groups.
Scrollable collection of visual items (images/videos).
Visual indicators that communicate an ongoing process, available in linear and circular forms with determinate and indeterminate variants.
Tabular layout for structured data with rows and columns.
Surface that applies tonal elevation and shadow to convey depth.
Visible focus outline for keyboard navigation.
Touch feedback effect for interactive surfaces.
Gesture-driven dismissal for list items and cards.
