Learn

UI Components

Learn reusable UI component families through anatomy, states, accessibility, RTL considerations and interactive examples.

• CardA contained surface that groups related information and actions.
• ButtonsAction controls taught as one family: standard buttons, groups, split actions, FABs and contextual navigation buttons.
• Dialog & LightboxFocused overlay surfaces, from task dialogs to media-focused lightboxes.
• Disclosure & AccordionProgressive disclosure taught from a single disclosure through grouped accordion behavior.
• TabsA navigation control for switching between related content in the same context.
• SelectA compact control for choosing one option from a list; use Multi-select when several choices are allowed.
• Search BarAn input that helps users find content, products or destinations quickly.
• BreadcrumbsA hierarchy trail that shows the user’s current location within a site.
• PaginationA control for moving between discrete pages of a longer result set.
• TooltipA short contextual message revealed near a focused or hovered control.
• Labels & StatusCompact labels, tags, chips and status indicators taught by meaning and interaction.
• Toggle / SwitchA binary control that turns a setting on or off.
• Slider / Range SliderA continuous control for selecting a value or numeric range.
• Carousel / SliderA horizontally cycled collection of images or content panels.
• App NavigationPersistent application navigation across sidebar, bottom-navigation and navigation-rail layouts.
• Mega MenuA large navigation panel that groups many destinations into clear categories.
• Stepper / Progress StepsA sequence indicator that shows position within a multi-step process.
• Alert / BannerA prominent message that communicates important system or contextual information without requiring a separate page.
• Toast NotificationA brief non-blocking message that confirms an action or reports status.
• TablesTabular information taught from scannable data tables through focused comparison tables.
• Date & TimeDate and time selection taught through calendars, date pickers and time pickers.
• File Upload / DropzoneA control for selecting or dragging files into an interface.
• CheckboxA control for selecting zero, one or multiple independent options.
• Radio ButtonA control for selecting exactly one option from a mutually exclusive group.
• Rating ControlA control for viewing or submitting an ordinal rating.
• AvatarA compact visual representation of a person, account or entity.
• Divider / SeparatorA visual separator that groups or distinguishes adjacent content.
• Progress & LoadingFeedback for known progress, indeterminate work and skeleton-based content loading.
• Edge PanelsPanels that enter from an interface edge, including side drawers and mobile bottom sheets.
• Popover & PreviewContextual surfaces from interactive popovers to lightweight hover/focus previews.
• Command Palette & ShortcutsFast expert navigation through command search and keyboard-shortcut communication.
• Empty StateA purposeful screen shown when no content or results are available.
• TimelineA chronological sequence of events, activity or milestones.
• Notification CenterA consolidated place for user updates, alerts and activity.
• Chat / Support WidgetA compact entry point for live support, messaging or an assistant.
• Map ComponentAn interactive or visual representation of geographic locations.
• Media PlayerControls for playing and navigating video or audio.
• Code BlockA formatted surface for code, commands or technical examples.
• Link / Text LinkA navigational text control that moves users to another destination or resource.
• MarqueeA continuously moving row of repeated or sequential content such as logos, labels or cards.
• Combobox / AutocompleteAn input that combines text entry with a filtered list of suggested options.
• Multi-select / Token InputA selection control that lets users choose multiple options and represent them as tokens or chips.
• Segmented ControlA compact set of mutually exclusive options for switching a local mode or view.
• MenusAction menus taught across dropdown, context-menu and menubar variants with their distinct interaction rules.
• Number Input & QuantityNumeric entry taught with direct input, steppers and quantity-selection behavior.
• ToolbarA compact row or column of actions related to the current content or task.
• Tree ViewA hierarchical list that expands and collapses nested items such as folders or categories.
• Table of Contents / Anchor NavigationIn-page navigation that links to sections within a long document or lesson.
• List / List ItemA repeatable row structure for scanning related items, actions or results.
• Inline EditingA pattern that lets users edit a value directly where it is displayed.
• Drag, Resize & Split PanelsPointer-heavy layout manipulation taught with drag handles, resizing and accessible alternatives.
• Color PickerA control for choosing a color through swatches, a spectrum or a formatted color value.
• Skip LinkAn accessibility link that lets keyboard users bypass repeated navigation and jump to main content.
• Text Fields & Form FieldThe complete field anatomy plus text input, textarea and one-time-code variants.
• Choice Card / Selectable CardA card-shaped radio or checkbox option used when choices need richer supporting information.