Menu

41 component specs

Liquid glass components

Every piece with its numbers and rules. Each one is a free prompt.

ComponentsEffects

Controls

Buttons, bars and inputs: glass that floats over content.

ButtonPrimary and secondary actions.
Icon buttonSingle-icon actions: undo/redo chips, floating action, search button next to a tab bar.
ToggleOn/off toggle buttons and single-choice radios.
SwitchBinary setting.
CheckboxMulti-select.
SliderContinuous value.
StepperNumeric input with −/+.
TabsSwitch between views or modes.
Tab barPrimary mobile navigation.
ToolbarGroup of related actions.
Navigation barTop navigation / site nav strip.
MenubarRow of menus (desktop).
SidebarPersistent navigation on large screens.
SelectChoose one value from a list.
CardGrouping surface in the controls/overlay layer (settings group, playground card, widget panel).
WidgetGlanceable home/lock-screen or dashboard tile.
InputText entry.
Search fieldSearch entry.
AvatarPerson or entity.
ProgressCompletion or level.
AccordionExpandable sections.
Media controlsPlayback controls over media.
DockDesktop app launcher strip.
Tab accessoryA persistent strip above the tab bar for one ongoing task: a mini player, a running timer, an upload in progress.
Vertical railPrimary navigation and the main action on one edge, for landscape phones, foldables and wide windows.
Map calloutNames the selected place on a map, floating above its pin.
Control stackSmall floating controls over a map or canvas: map style, 3D, look around, and locate.
Page controlShows which page of a carousel or photo set is showing, and steps to another.
ShutterThe camera's capture cluster: shutter, last capture, camera flip, zoom and mode.

Overlays

Menus, sheets and dialogs that open above everything else.

MenuCommand list opened from a trigger.
Context menuMenu at the pointer.
PopoverRich floating panel anchored to a trigger.
TooltipShort label for a control.
DialogBlocking decision or form.
SheetTask surface from the bottom (mobile) or side.
ToastTransient feedback.
Control moduleQuick settings tiles: round toggles, labelled tiles, level sliders and a media tile over the dimmed system.

Content

What sits inside the glass or in the content layer: mostly flat, by rule.

BadgeCount or status.
ListScrolling rows of content.
SeparatorDivide rows inside a glass body.
App iconApp or feature icon in the glass style.