Components
Every component, mapped to evidence
Organized like Apple's own HIG component catalogue, then translated into Instagram's visual language. Pages cite direct /ig evidence, derive from confirmed neighbouring tokens, or mark native OS concepts as not found in /ig and platform-scoped.
Complete component catalogue
Every entry is graded: Documented (a real /ig selector backs it), Partially evidenced (the general token system and neighbouring components define it), or Not found in /ig (usually a native macOS/iOS/watchOS concept outside Instagram’s web-product surface).
Content
Image Views
A ratio-locked frame for a single piece of media — object-fit: cover, a fixed crop, and a shimmer skeleton while it loads.
View component DocumentedText Views
Longer, selectable copy — captions, bios, comments — built from the same system type scale as every control, not a document-style stack.
View componentLayout And Organization
Boxes
The structural container every surface composes from — a 1px-bordered, token-filled region with no decorative chrome of its own.
View component DocumentedCollections
A horizontally-scrolling row of repeating items — the about-page's mosaic and card rows, and the production app's hidden-scrollbar carousels.
View component DocumentedColumn Views
Two adjacent panes that collapse to one on mobile — Instagram's own split-screen template, not a generic multi-pane browser.
View component Partially evidencedDisclosure Controls
A chevron that rotates 180° to reveal or hide detail in place — built from the same rotation transform the about-page uses to flip its carousel arrow.
View component DocumentedLabels
Compact, secondary-weight text that names a value or piece of metadata — the --ig-secondary-text / --ig-tertiary-text pair at system-12.
View component DocumentedLists And Tables
Row-based, separator-divided, truncating content — search results and comment-style rows, not a desktop spreadsheet grid.
View component DocumentedLockups
Avatar/icon + title + secondary text bound into one scannable row — the exact anatomy of every search result and identity row in /ig.
View component DocumentedTab Views
Peer panels switched by a row of labelled controls — the about-page's interactive type-tester, already documented in full on Dropdowns & Selectors.
View componentMenus And Actions
Context Menus
An object-specific action list anchored to a trigger — Instagram's legacy .uiContextualLayer system.
View component DocumentedMenus
A compact action list where the trigger and choices stay in one context — the canonical flyout, toggled open/closed by a single class.
View component Partially evidencedActivity Views
A share/export chooser presented as a sheet — the Action Sheet transition hosting a destination list instead of a command list.
View component Not found in /igDock Menus
A macOS Dock-style persistent menu — outside Instagram's web and mobile product surface.
View component Not found in /igEdit Menus
Desktop-app text/media editing commands (copy, paste, crop, duplicate) — represented in Instagram by the general Menus flyout.
View component Not found in /igHome Screen Quick Actions
iOS home-screen long-press shortcuts — outside the scope of a web property entirely.
View component Not found in /igOrnaments
Small attached controls around a window or media surface — a native window-chrome category outside Instagram's web surfaces.
View component Partially evidencedPop Up Buttons
A tertiary button that displays the current selection and persists it as its own label once the menu closes.
View component Partially evidencedPull Down Buttons
A button that looks identical at rest, then opens the same flyout menu used everywhere else in the system.
View component Not found in /igThe Menu Bar
A global, OS-level command bar — a native desktop shell pattern outside Instagram's web/mobile product surface.
View component Not found in /igToolbars
A row of frequently-repeated commands — the only "toolbar"-named token found actually describes the bottom tab bar, not a command toolbar.
View componentNavigation And Search
Search Fields
A fixed-height query input paired with fixed-height, truncating result rows — one of the most precisely evidenced patterns in /ig.
View component Partially evidencedSidebars
Persistent left-rail navigation built from row anatomy already proven in Lists And Tables, with the current destination indicated the same way Tab Bars indicates its current page.
View component DocumentedTab Bars
The bottom row of top-level destinations — sized by the one real "toolbar" token found in /ig.
View component Partially evidencedToken Fields
A text field that converts each accepted entry into a pill-shaped chip — the Text Field input row plus the pill grammar used for tags and badges.
View componentPresentation
Action Sheets
Compact, touch-first action choices — the same full-height sheet transition used by Instagram's brand menu, reframed as a choice list.
View component Partially evidencedAlerts
A centered modal carrying one title, one line of body copy, and one or two actions — the lightbox's zoom-settle entrance applied to a decision instead of media.
View component Partially evidencedPage Controls
Small filled circles marking position in a short, manually-paged sequence — the carousel's static counterpart to the time-driven Stories Progress bar.
View component DocumentedPopovers
Lightweight contextual content anchored to a trigger — the same .uiContextualLayer system as Context Menus and Menus, viewed as a presentation surface.
View component DocumentedScroll Views
A surface that owns its own scrollable viewport, with a custom track and gripper instead of the browser default.
View component DocumentedSheets
A full-height or bottom-up surface that temporarily takes over the viewport — the broader form of the Action Sheet transition.
View component Partially evidencedWindows
A fixed, non-resizable task surface — Instagram's equivalent of a window is the legacy modal box, deliberately without resize or minimize chrome.
View componentSelection And Input
Color Wells
A circular swatch previewing a chosen colour before a picker opens — built from the same circle primitive as every avatar and icon button.
View component Partially evidencedCombo Boxes
A Text Field that opens a Menus-style result list as you type — the same two anatomies the search experience already pairs.
View component Partially evidencedDigit Entry Views
A row of equal-width cells for a verification code, each cell sized to the same height as a standard Text Field.
View component Partially evidencedImage Wells
An Image View frame with an empty-state affordance — the same ratio-locked container, showing an upload icon instead of a shimmer until a value exists.
View component Partially evidencedPickers
A bounded value-set selector presented as a Sheet on touch and a Menus flyout on pointer input — there's no third, wheel-style picker surface in this system.
View component Partially evidencedSegmented Controls
Peer choices sharing one pill-shaped track — Stories Progress's segmented shape, made interactive and given a selected state instead of a fill timer.
View component Partially evidencedSliders
A thin track with a circular thumb sized to the toggle's exact proportions — the continuous-value counterpart to the Toggle's binary one.
View component Partially evidencedSteppers
A three-part minus/value/plus row built at the same 36px height as every other compact control, with the value field reusing Text Field anatomy.
View component DocumentedText Fields
A compact 36px input with a paired light/dark border token and a floating label pattern.
View component DocumentedToggles
A 51×31 track with a 28px circular thumb that translates exactly 23px on check — one of the most precisely confirmed components in this whole manual.
View component Not found in /igVirtual Keyboards
A custom on-screen keyboard — Instagram's web client delegates text entry to the platform keyboard.
View componentStatus
Activity Rings
A watchOS fitness-ring indicator — outside Instagram's status-feedback model.
View component Not found in /igGauges
A bounded-value dial or arc indicator — outside Instagram's linear progress grammar.
View component DocumentedProgress Indicators
This is the same component as Stories Progress, viewed under a different HIG category name — see that page for the full, real treatment.
View component Not found in /igRating Indicators
Star or sentiment ratings — outside Instagram's engagement and status vocabulary.
View componentExisting deep dives
Earlier focused pages remain available as supporting pattern studies.
Buttons
The three-tier primary / secondary / tertiary hierarchy and their states.
View componentCharts
Instagram-style data visualisation anatomy, marks, axes, interaction, and accessibility.
View componentLinks & Navigation
The underline-grow hover treatment and the structurally-inert disabled state.
View componentCards
The deep-dive editorial card and the legacy utility card.
View componentModals & Panels
Full-height panels, the lightbox zoom-settle, and corner-clipping via clip-path.
View componentMessaging
Chat bubble colour, the functional tail notch, and the Optimistic DM type cut.
View componentStories Progress
The segmented pill progress bar that drives Stories playback.
View componentDropdowns & Selectors
The interactive type-tester swatch pattern and legacy dense menus.
View componentForms
Input borders, radius, and focus tokens — plus the extended checkbox, radio, select, and validation grammar.
View componentToasts & Notifications
The transient, self-dismissing confirmation pattern — shape, motion, and timing, extended from confirmed elevation and easing tokens.
View componentData Tables
Sortable, multi-column tables for dashboards — built from Lists & Tables' confirmed row tokens, extended past that page's single-column pattern.
View componentStat Cards
Dashboard KPI summary tiles — label, value, and trend indicator, built from confirmed shadow and semantic colour tokens.
View componentHUD Elements
Health/XP bars, score badges, and reward feedback timing — the real-time overlay tokens Platform Guidance only recommended in prose, now implemented and live.
View componentBreadcrumbs
Hierarchy wayfinding — the exact component this manual's own header uses on every page, documented as a reusable pattern.
View componentPrev/Next Navigation
Sequential page navigation with the rolling-chevron hover affordance — the exact footer component this manual uses on every page.
View componentCommand Palette
The ⌘K/Ctrl+K search overlay pattern — press it right now. Extracted from this manual's own SearchPalette component and keyboard wiring.
View component