✳ A visual field guide for people who build
Find the word.
Build the thing.
You know what it looks like. Now know what to call it.
Explore the pieces that make up every interface.
K
Try describing it:
Layout
Sidebar
A persistent side region used to navigate sections or collections.
WebiPadOSAndroid+3
Overlays
Bottom sheet
A surface attached to the bottom edge of a view.
WebiOSiPadOS+1
Controls
Segmented control
Switches between a small set of closely related options.
WebiOSiPadOS+4
Overlays
Popover
A compact floating surface anchored to a trigger.
WebiOSiPadOS+5
Navigation
Navigation rail
A compact vertical strip for switching between primary destinations.
WebiPadOSAndroid+3
Feedback
Toast
A brief nonblocking confirmation message.
WebiOSiPadOS+5
Layout
Inspector
A supporting panel for viewing or editing properties of the selected object.
WebiPadOSAndroid+3
Forms
Combobox
Combines text entry with a list of available choices.
WebiOSiPadOS+4
Content display
Card
A contained unit of related content and actions.
WebiOSiPadOS+7
Overlays
Dialog
A separate surface for a focused task or decision.
WebiOSiPadOS+5
Navigation
Tab bar
A persistent set of peer destinations represented by tabs.
WebiOSiPadOS+9
Controls
Slider
Chooses a value along a continuous or stepped track.
WebiOSiPadOS+4
Layout
Split view
A layout that presents two or more related panes beside each other.
WebiPadOSAndroid+3
Overlays
Tooltip
A short explanation attached to a control.
WebiOSiPadOS+5
Content display
Accordion
Stacked sections that expand to reveal content.
WebiOSiPadOS+5
Navigation
Breadcrumbs
A trail of links showing the current location within a hierarchy.
WebmacOSWindows+1
Controls
Switch
Turns a setting on or off immediately.
WebiOSiPadOS+9
Overlays
Command palette
A searchable launcher for application commands.
WebiPadOSmacOS+2
Layout
Detail pane
The region that shows the contents of the currently selected item.
WebiPadOSAndroid+3
Feedback
Skeleton
Placeholder shapes matching content that is loading.
WebiOSiPadOS+5
Controls
Floating action button
Floats above content to highlight one frequent action.
WebiOSiPadOS+4
Content display
Carousel
A collection revealed one slide at a time.
WebiOSiPadOS+7
Gestures & device
Gaze and pinch
A spatial interaction that targets with eye gaze and activates with a hand pinch.
visionOS
Gestures & device
Digital Crown
A physical rotating control on Apple Watch that supports scrolling and other system interactions.
watchOS
Showing 1–24 of 260
Page 1 of 11
Every element is a starting point. Make it your own.