Title: Widget Gallery
Slug: widget-gallery

# Widget Gallery

# Display

## Status Page

[<picture>
  <source srcset="status-page-dark.png" media="(prefers-color-scheme: dark)">
  <img src="status-page.png" alt="status-page">
</picture>](class.StatusPage.html)

## Toast Overlay

[<picture>
  <source srcset="toast-overlay-dark.png" media="(prefers-color-scheme: dark)">
  <img src="toast-overlay.png" alt="toast-overlay">
</picture>](class.ToastOverlay.html)

## Banner

[<picture>
  <source srcset="banner-dark.png" media="(prefers-color-scheme: dark)">
  <img src="banner.png" alt="banner">
</picture>](class.Banner.html)

## Spinner

[<picture>
  <source srcset="spinner-dark.png" media="(prefers-color-scheme: dark)">
  <img src="spinner.png" alt="spinner">
</picture>](class.Spinner.html)

## Avatar

[<picture>
  <source srcset="avatar-dark.png" media="(prefers-color-scheme: dark)">
  <img src="avatar.png" alt="avatar">
</picture>](class.Avatar.html)

## Shortcut Label

[<picture>
  <source srcset="shortcut-label-dark.png" media="(prefers-color-scheme: dark)">
  <img src="shortcut-label.png" alt="shortcut-label">
</picture>](class.ShortcutLabel.html)

# Controls

## Toggle Group

[<picture>
  <source srcset="toggle-group-dark.png" media="(prefers-color-scheme: dark)">
  <img src="toggle-group.png" alt="toggle-group">
</picture>](class.ToggleGroup.html)

# Dialogs

## Dialog

[<picture>
  <source srcset="dialog-floating-dark.png" media="(prefers-color-scheme: dark)">
  <img src="dialog-floating.png" alt="dialog-floating">
</picture>
<picture>
  <source srcset="dialog-bottom-dark.png" media="(prefers-color-scheme: dark)">
  <img src="dialog-bottom.png" alt="dialog-bottom">
</picture>](class.Dialog.html)

## Alert Dialog

[<picture>
  <source srcset="alert-dialog-dark.png" media="(prefers-color-scheme: dark)">
  <img src="alert-dialog.png" alt="alert-dialog">
</picture>](class.AlertDialog.html)

# About Dialog

[<picture>
  <source srcset="about-dialog-dark.png" media="(prefers-color-scheme: dark)">
  <img src="about-dialog.png" alt="about-dialog">
</picture>](class.AboutDialog.html)

## Shortcuts Dialog

[<picture>
  <source srcset="shortcuts-dialog-dark.png" media="(prefers-color-scheme: dark)">
  <img src="shortcuts-dialog.png" alt="shortcuts-dialog">
</picture>](class.ShortcutsDialog.html)

# Boxed Lists

## Action Row

[<picture>
  <source srcset="action-row-dark.png" media="(prefers-color-scheme: dark)">
  <img src="action-row.png" alt="action-row">
</picture>](class.ActionRow.html)

## Switch Row

[<picture>
  <source srcset="switch-row-dark.png" media="(prefers-color-scheme: dark)">
  <img src="switch-row.png" alt="switch-row">
</picture>](class.SwitchRow.html)

## Combo Row

[<picture>
  <source srcset="combo-row-dark.png" media="(prefers-color-scheme: dark)">
  <img src="combo-row.png" alt="combo-row">
</picture>](class.ComboRow.html)

## Expander Row

[<picture>
  <source srcset="expander-row-dark.png" media="(prefers-color-scheme: dark)">
  <img src="expander-row.png" alt="expander-row">
</picture>](class.ExpanderRow.html)

## Entry Row

[<picture>
  <source srcset="entry-row-dark.png" media="(prefers-color-scheme: dark)">
  <img src="entry-row.png" alt="entry-row">
</picture>](class.EntryRow.html)

## Password Entry Row

[<picture>
  <source srcset="password-entry-row-dark.png" media="(prefers-color-scheme: dark)">
  <img src="password-entry-row.png" alt="password-entry-row">
</picture>](class.PasswordEntryRow.html)

## Spin Row

[<picture>
  <source srcset="spin-row-dark.png" media="(prefers-color-scheme: dark)">
  <img src="spin-row.png" alt="spin-row">
</picture>](class.SpinRow.html)

## Button Row

[<picture>
  <source srcset="button-rows-dark.png" media="(prefers-color-scheme: dark)">
  <img src="button-rows.png" alt="button-rows">
</picture>](class.ButtonRow.html)

# Preferences

## Preferences Group

[<picture>
  <source srcset="preferences-group-dark.png" media="(prefers-color-scheme: dark)">
  <img src="preferences-group.png" alt="preferences-group">
</picture>](class.PreferencesGroup.html)

## Preferences Page

[<picture>
  <source srcset="preferences-page-dark.png" media="(prefers-color-scheme: dark)">
  <img src="preferences-page.png" alt="preferences-page">
</picture>](class.PreferencesPage.html)

## Preferences Dialog

[<picture>
  <source srcset="preferences-dialog-dark.png" media="(prefers-color-scheme: dark)">
  <img src="preferences-dialog.png" alt="preferences-dialog">
</picture>](class.PreferencesDialog.html)

# Navigation

## Navigation View

[<picture>
  <source srcset="navigation-view-dark.png" media="(prefers-color-scheme: dark)">
  <img src="navigation-view.png" alt="navigation-view">
</picture>](class.NavigationView.html)

## Navigation Split View

[<picture>
  <source srcset="navigation-split-view-dark.png" media="(prefers-color-scheme: dark)">
  <img src="navigation-split-view.png" alt="navigation-split-view">
</picture>
<picture>
  <source srcset="navigation-split-view-collapsed-dark.png" media="(prefers-color-scheme: dark)">
  <img src="navigation-split-view-collapsed.png" alt="navigation-split-view-collapsed">
</picture>](class.NavigationSplitView.html)

## Overlay Split View

[<picture>
  <source srcset="overlay-split-view-dark.png" media="(prefers-color-scheme: dark)">
  <img src="overlay-split-view.png" alt="overlay-split-view">
</picture>
<picture>
  <source srcset="overlay-split-view-collapsed-dark.png" media="(prefers-color-scheme: dark)">
  <img src="overlay-split-view-collapsed.png" alt="overlay-split-view-collapsed">
</picture>](class.OverlaySplitView.html)

## Sidebar

[<picture>
  <source srcset="sidebar-dark.png" media="(prefers-color-scheme: dark)">
  <img src="sidebar.png" alt="sidebar">
</picture>](class.Sidebar.html)

## Carousel

[<picture>
  <source srcset="carousel-dark.png" media="(prefers-color-scheme: dark)">
  <img src="carousel.png" alt="carousel">
</picture>](class.Carousel.html)

[<picture>
  <source srcset="carousel-indicator-dots-dark.png" media="(prefers-color-scheme: dark)">
  <img src="carousel-indicator-dots.png" alt="carousel-indicator-dots">
</picture>](class.CarouselIndicatorDots.html)

[<picture>
  <source srcset="carousel-indicator-lines-dark.png" media="(prefers-color-scheme: dark)">
  <img src="carousel-indicator-lines.png" alt="carousel-indicator-lines">
</picture>](class.CarouselIndicatorLines.html)

## View Switcher

[<picture>
  <source srcset="view-switcher-dark.png" media="(prefers-color-scheme: dark)">
  <img src="view-switcher.png" alt="view-switcher">
</picture>](class.ViewSwitcher.html)

[<picture>
  <source srcset="view-switcher-bar-dark.png" media="(prefers-color-scheme: dark)">
  <img src="view-switcher-bar.png" alt="view-switcher-bar">
</picture>](class.ViewSwitcherBar.html)

### Inline View Switcher

[<picture>
  <source srcset="inline-view-switcher-dark.png" media="(prefers-color-scheme: dark)">
  <img src="inline-view-switcher.png" alt="inline-view-switcher">
</picture>](class.InlineViewSwitcher.html)

### View Switcher Sidebar

[<picture>
  <source srcset="view-switcher-sidebar-dark.png" media="(prefers-color-scheme: dark)">
  <img src="view-switcher-sidebar.png" alt="view-switcher-sidebar">
</picture>](class.ViewSwitcherSidebar.html)

## Tabs

[<picture>
  <source srcset="tab-bar-dark.png" media="(prefers-color-scheme: dark)">
  <img src="tab-bar.png" alt="tab-bar">
</picture>](class.TabBar.html)

[<picture>
  <source srcset="tab-overview-dark.png" media="(prefers-color-scheme: dark)">
  <img src="tab-overview.png" alt="tab-overview">
</picture>](class.TabOverview.html)

[<picture>
  <source srcset="tab-button-dark.png" media="(prefers-color-scheme: dark)">
  <img src="tab-button.png" alt="tab-button">
</picture>](class.TabButton.html)

## Bottom Sheet

[<picture>
  <source srcset="bottom-sheet-dark.png" media="(prefers-color-scheme: dark)">
  <img src="bottom-sheet.png" alt="bottom-sheet">
</picture>](class.BottomSheet.html)

# Layout

## Breakpoint Bin

[<picture>
  <source srcset="breakpoint-bin-dark.png" media="(prefers-color-scheme: dark)">
  <img src="breakpoint-bin.png" alt="breakpoint-bin">
</picture>](class.BreakpointBin.html)

## Clamp

[<picture>
  <source srcset="clamp-wide-dark.png" media="(prefers-color-scheme: dark)">
  <img src="clamp-wide.png" alt="clamp-wide">
</picture>
<picture>
  <source srcset="clamp-narrow-dark.png" media="(prefers-color-scheme: dark)">
  <img src="clamp-narrow.png" alt="clamp-narrow">
</picture>](class.Clamp.html)

See also: [class@ClampLayout], [class@ClampScrollable]

## Wrap Box

[<picture>
  <source srcset="wrap-box-dark.png" media="(prefers-color-scheme: dark)">
  <img src="wrap-box.png" alt="wrap-box">
</picture>](class.WrapBox.html)

See also: [class@WrapLayout]

## Bin

[<picture>
  <source srcset="bin-dark.png" media="(prefers-color-scheme: dark)">
  <img src="bin.png" alt="bin">
</picture>](class.Bin.html)

# Helpers

## Toolbar View

[<picture>
  <source srcset="toolbar-view-dark.png" media="(prefers-color-scheme: dark)">
  <img src="toolbar-view.png" alt="toolbar-view">
</picture>](class.ToolbarView.html)

## Window Title

[<picture>
  <source srcset="window-title-dark.png" media="(prefers-color-scheme: dark)">
  <img src="window-title.png" alt="window-title">
</picture>](class.WindowTitle.html)

## Header Bar

[<picture>
  <source srcset="header-bar-dark.png" media="(prefers-color-scheme: dark)">
  <img src="header-bar.png" alt="header-bar">
</picture>](class.HeaderBar.html)

## Window

[<picture>
  <source srcset="window-dark.png" media="(prefers-color-scheme: dark)">
  <img src="window.png" alt="window">
</picture>](class.Window.html)

See also: [class@ApplicationWindow]

## Split Button

[<picture>
  <source srcset="split-button-dark.png" media="(prefers-color-scheme: dark)">
  <img src="split-button.png" alt="split-button">
</picture>](class.SplitButton.html)

## Button Content

[<picture>
  <source srcset="button-content-dark.png" media="(prefers-color-scheme: dark)">
  <img src="button-content.png" alt="button-content">
</picture>](class.ButtonContent.html)

