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)

### Avatar

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

## Dialogs

### Message Dialog

[<picture>
  <source srcset="message-dialog-dark.png" media="(prefers-color-scheme: dark)">
  <img src="message-dialog.png" alt="message-dialog">
</picture>](class.MessageDialog.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)

### 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)

## 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 Window

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

## About Window

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

## Navigation

### 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-title-dark.png" media="(prefers-color-scheme: dark)">
  <img src="view-switcher-title.png" alt="view-switcher-title">
</picture>](class.ViewSwitcherTitle.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)

### 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)

## Adaptive Containers

### 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]

### Leaflet

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

### Flap

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

### Squeezer

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

## Helpers

### 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)

### Bin

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