YouTube / Public web reference / 2026.09
Component and control catalog
Each family has a live specimen. Use the anatomy and contract beside the rendered example before making a new variation.
All entries shown
| Component | Anatomy | States and provenance | Live family |
|---|---|---|---|
| global-header | menu trigger, logo link, search input, clear-query control, search submit, voice search, settings, sign-in | empty query, populated query, signed-out observed | Open specimen |
| desktop-guide | guide trigger, primary route entries, explore grouping, more-from-YouTube grouping, sign-in prompt, collapse, show-more | expanded, collapsed, signed-out observed | Open specimen |
| search-filter-tab-row | scroll previous, filter tabs, scroll next, Filters trigger | aria-selected=true, aria-selected=false, overflow controls mixed observed and documented | Open specimen |
| search-result-card | thumbnail, duration or live badge, title, channel identity, metadata, description, overflow action | standard, sponsored, live, mix, original long-title robustness fixture, original Arabic RTL robustness fixture, original missing-media robustness fixture observed with clearly labelled original robustness additions | Open specimen |
| video-player | play, next, mute, seek bar, live indicator, autoplay, CC, settings, theater, cast, fullscreen, like, dislike, share, save, download, more actions | paused, playing documented, unavailable observed, CC unavailable observed, settings collapsed, signed-out gated completion mixed observed and documented | Open specimen |
| playable-local-media | native video, play or pause, mute, seek, settings, full screen | no autoplay, paused, playing, muted, unmuted, reduced motion original addition | Open specimen |
| share-dialog | dialog, social-share target carousel, copy-link field and Copy action, Start at checkbox and time, close | opened, retrieval error observed observed | Open specimen |
| metadata-description | summary copy, more trigger, less trigger | collapsed, expanded observed | Open specimen |
| channel-header | avatar or banner not measured, name, handle, counts, description, links disclosure, subscribe | public signed-out, description collapsed mixed observed and documented | Open specimen |
| channel-tabs | Home, Videos, Shorts, Live, Podcasts, Playlists, Posts | one selected, remaining unselected observed | Open specimen |
| history-gate | heading, explanatory copy, sign-in action, watch/search history controls | signed out observed | Open specimen |
| playlist-save-flow | playlist identity and cover, ordered playlist rows, type filters, more action, save account gate, public sign-in boundary | public signed-out viewing, account-gated save public observation plus first-party documentation; authenticated create, name, and privacy editing are a retained boundary rather than public anatomy | Open specimen |
| shorts-player | vertical Short, continuous feed, overlay controls not captured | continuous advance documented, Clear Screen staged rollout first-party documentation | Open specimen |
| appearance-menu | settings trigger, appearance choice menu | menu open, appearance open, light option, dark option source-derived reconstruction | Open specimen |
| premium-plan-faq | hero and exact Premium logo, membership plan cards and native choices, Premium Lite benefit boundary, public feature sections, loaded public feature media, membership comparison, membership CTAs, public Help and terms links, Contact us sign-in boundary, seven FAQ disclosures, alternate Lite explainer intro, alternate Lite explainer four-feature group | public signed-out landing, plan selection monthly, plan selection annual, FAQ collapsed, FAQ expanded, sign-in purchase boundary, alternate Lite explainer query variant observed signed-out public source with measured local composition and interaction reconstruction; captured prices and trials are dated examples, while checkout, billing, entitlement, cancellation, and account eligibility remain unverified private boundaries | Open specimen |
Composition rules
| Need | Use | Avoid |
|---|---|---|
| Navigation to a route | Native link with href and aria-current on the selected destination. | Buttons with location changes hidden inside unrelated handlers. |
| Action in current context | Native button; immediate visible feedback; disabled only when eligibility prevents action. | An inert imitation of a production control. |
| Filter selection | Selected chip or tab with a visible panel/result change and matching semantic state. | Color change without changing the represented content. |
| Video collection | Reusable media card or result row from the relevant family. Parent owns row/grid gap. | Absolute offsets used to align unrelated card types. |
| Account-required action | Explain the signed-out boundary. Offer a safe local gate or the documented account entry. | Pretending a local “like” or “subscribe” was sent to YouTube. |
| Description disclosure | Button changes visible content, aria-expanded and accessible label. | Clickable text without keyboard semantics. |
Precision at the point of use
The family pages expose local selectors, dimensions, per-side padding and border, parent gap ownership, typography, focus and keyboard behavior. Production probes preserve subpixel sizes. A 40.421875 px chip is not rounded to 40 px in the source record.
Read extension and API rules · Browse full page compositions