A-Z quick reference

All Terms

The fastest way to scan all UI terminology in the guide. Find the word, read the short definition, and open the full entry only when you need more context.

A

  • Accordion

    Expandable sections that reveal or hide content when clicked.

    UI Components Expandable sectionsCollapsible panelsClick-to-open sections

B

  • Breadcrumb

    A breadcrumb shows where the current page sits in a hierarchy.

    UI Components Breadcrumb trailPath navigationPage path
  • Button

    A button is something a person selects to make an action happen.

    UI Components CTAControlAction button

C

  • Card

    A card is a contained block that groups related content or actions.

    UI Components Content cardTileBox for each item
  • Card Layout

    A card layout presents repeated items as separate contained blocks.

    Layouts & Structure Card gridTile layoutBoxes for each item
  • Categories

    Categories are structured groups used to organize items into broader buckets.

    Data & Content Types GroupsSectionsBuckets
  • Checkbox

    A checkbox lets someone turn one option on or off, often as part of a group.

    UI Components Check boxTick boxLittle square option
  • CSV File

    A CSV file is a plain-text table format where values are separated by commas.

    Data & Content Types CSVComma-separated valuesSpreadsheet export

D

  • Dashboard Layout

    A dashboard layout organizes key metrics, summaries, and actions on one overview screen.

    Layouts & Structure DashboardOverview layoutMain metrics screen
  • Disabled State

    A disabled state shows that a control is visible but cannot currently be used.

    States & Feedback DisabledInactive stateGrayed out
  • Document

    A document is a file or content item built around readable text and supporting information.

    Data & Content Types Text documentFileDoc
  • Downloading

    Downloading saves a file from an app or website onto a person's device.

    Actions & Behaviors DownloadExportSave file
  • Drag and Drop

    Drag and drop lets someone move an item by dragging it to a new place or target.

    Actions & Behaviors DraggingDrop targetMove by dragging
  • Dropdown

    A dropdown lets someone choose one option from a hidden list that opens on demand.

    UI Components Select menuPickerMenu

E

  • Empty State

    An empty state appears when a section has no content to show.

    States & Feedback Blank stateNo results stateEmpty screen
  • Error Message

    An error message tells someone that something went wrong.

    States & Feedback ErrorFailure messageWarning text

F

  • Feed Layout

    A feed layout shows a stream of posts, updates, or items in chronological or ranked order.

    Layouts & Structure Activity feedStream layoutTimeline
  • Filtering

    Filtering narrows a set of items to only the ones that match selected criteria.

    Actions & Behaviors FilterApply filtersNarrow results
  • Form

    A form is a group of fields and controls used to collect and submit information.

    UI Components Entry formSubmission formPage to fill out

G

  • Grid Layout

    A grid layout arranges content in rows and columns with consistent spacing.

    Layouts & Structure GridTile gridRows of cards

I

  • Image

    An image is visual media such as a photo, illustration, screenshot, or graphic.

    Data & Content Types PictureGraphicPhoto
  • Infinite Scroll

    Infinite scroll loads more items automatically as someone reaches the end of a list.

    UI Components Endless scrollContinuous feedKeep loading as I scroll

J

  • JSON

    JSON is a text format for structured data using objects, arrays, keys, and values.

    Data & Content Types JavaScript Object NotationJSON dataAPI data

L

  • Loading State

    A loading state shows that content or an action is still in progress.

    States & Feedback LoadingPending stateSkeleton state

M

  • Metadata

    Metadata is descriptive information about content or data, such as author, date, type, or status.

    Data & Content Types Descriptive dataItem detailsExtra info
  • Mobile Navigation

    Mobile navigation is the compact navigation pattern used on small screens.

    Layouts & Structure Mobile navPhone navigationMobile menu
  • Modal

    A focused box that appears above the page and asks someone to complete or dismiss a task.

    UI Components DialogModal dialogPopup window
  • Multi-Select

    Multi-select lets someone choose more than one item from a set.

    Actions & Behaviors Multiple selectionMulti-select listPick several

P

  • Pagination

    Pagination splits a long set of results into numbered pages.

    UI Components Page numbersPaged resultsNext page links
  • Popup

    Popup is an everyday word for a temporary thing that appears over or near the current page.

    UI Components Pop-upOverlayPop-up message
  • Progress Indicator

    A progress indicator shows that work is happening or how much has finished.

    UI Components Progress barSpinnerLoader

R

  • Responsive Layout

    A responsive layout adapts spacing, columns, and navigation to different screen sizes.

    Layouts & Structure Responsive designAdaptive layoutMobile-friendly layout

S

  • Search Bar

    A search bar is an input used to find matching content.

    UI Components Search fieldSearch boxSearch input
  • Searching

    Searching finds matching items based on words someone types.

    Actions & Behaviors SearchQueryLook up
  • Sidebar Layout

    A sidebar layout places supporting navigation, filters, or details beside the main content area.

    Layouts & Structure Side panel layoutLeft rail layoutPage with a side menu
  • Sidebar Navigation

    A vertical navigation area, usually on the left, that lists major places or sections in an app.

    UI Components Side navLeft navigationNavigation rail
  • Sorting

    Sorting changes the order of items without removing them.

    Actions & Behaviors SortReorderPut in order
  • Split Pane

    A split pane divides the screen into two resizable or coordinated areas.

    Layouts & Structure Split viewTwo-pane layoutSide-by-side panels
  • Structured Data

    Structured data is information organized into predictable fields, records, or key-value pairs.

    Data & Content Types Structured contentFielded dataOrganized data
  • Success Message

    A success message confirms that an action finished correctly.

    States & Feedback Confirmation messageSuccess alertSaved message

T

  • Table

    A table organizes related information into rows and columns.

    UI Components Data tableGridSpreadsheet view
  • Table Data

    Table data is structured information arranged as rows and columns.

    Data & Content Types Tabular dataRow-and-column dataSpreadsheet data
  • Tabs

    Tabs let someone switch between related views that share the same space.

    UI Components Tab barTab panelClickable sections across the top
  • Tags

    Tags are flexible labels attached to items so they can be grouped, filtered, or found.

    Data & Content Types LabelsKeywordsTopic labels
  • Text Input

    A text input is a field where someone types short text.

    UI Components Input fieldText fieldTyping box
  • Toast Message

    A toast message is a small temporary message that appears after an action.

    UI Components ToastSnackbarNotification
  • Toggle

    A toggle switches a setting between on and off.

    UI Components SwitchToggle switchOn off switch
  • Tooltip

    A tooltip is a small note that appears near something to explain it briefly.

    UI Components Hover textHelp tipPop-up label
  • Top Navigation

    Top navigation places primary links across the top of a page or app.

    Layouts & Structure Top navHeader navigationMenu at the top

U

  • Uploading

    Uploading sends a file from a person's device into the app or service.

    Actions & Behaviors UploadFile uploadAdd a file

V

  • Validation

    Validation checks whether entered information is acceptable before or during submission.

    Actions & Behaviors Field validationInput validationCheck the form
  • Validation Error

    A validation error tells someone that entered information does not meet a required rule.

    States & Feedback Field errorInput errorForm error
  • Video

    Video is time-based visual media that may include audio, playback controls, and captions.

    Data & Content Types Video fileClipRecording

W

  • Wizard Flow

    A wizard flow breaks a task into a sequence of guided steps.

    Layouts & Structure Step-by-step flowSetup wizardGuided setup