Presentation

Adwaita’s presentation widgets communicate state and identity rather than collect input: an avatar for a person or account, a banner for an in-context message, a spinner for work in progress, a status page for an empty state, and a window title for a header bar.

Every widget below is described independently of any one toolkit, then shown three ways. Native GJS (real Libadwaita through @girs/adw-1) is the primary implementation; the Web (@gjsify/adwaita-web) and NativeScript (@gjsify/adwaita-nativescript) ports mirror it. The preview is the real Web component — no screenshot — so it follows the light/dark toggle just like a native window would.

Avatar

A round widget that stands in for a person, account, or entity. Given a name it derives initials and a stable background colour from that name; otherwise it falls back to a symbolic icon. The size scales it from an inline list glyph up to a full profile header.

Adw.Avatar

import Adw from '@girs/adw-1';

const avatar = new Adw.Avatar({
    size: 96,
    text: 'Ada Lovelace',
    showInitials: true,
    iconName: 'avatar-default-symbolic',
});

using Gtk 4.0;
using Adw 1;

Adw.Avatar {
  text: "Ada Lovelace";
  size: 96;
  show-initials: true;
  icon-name: "avatar-default-symbolic";
}

<!-- import '@gjsify/adwaita-web' once to register the elements -->
<adw-avatar text="Ada Lovelace" size="96" show-initials icon="avatar-default"></adw-avatar>

import { AdwAvatar } from '@gjsify/adwaita-nativescript';

const avatar = new AdwAvatar();
avatar.text = 'Ada Lovelace';
avatar.size = 96;
// The NS avatar always shows derived initials — the CSS-subset widget has no
// icon-theme lookup, so `showInitials` / `iconName` have no equivalent.

A full-width strip pinned across the top of a view to surface a single, in-context status message — a metered connection, an offline state, a pending action. It carries a title and an optional action button, and reveals or hides itself so it only takes space when relevant.

Adw.Banner

import Adw from '@girs/adw-1';
import Gtk from '@girs/gtk-4.0';

const banner = new Adw.Banner({
    title: 'Metered connection — updates paused',
    buttonLabel: 'Resume',
    revealed: true,
});

// The banner is full-width; a sized container gives it a width to fill.
const container = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL, widthRequest: 460 });
container.append(banner);

using Gtk 4.0;
using Adw 1;

Adw.Banner {
  title: _("Metered connection — updates paused");
  button-label: _("Resume");
  revealed: true;
}

<adw-banner title="Metered connection — updates paused" button-label="Resume" revealed></adw-banner>

import { AdwBanner } from '@gjsify/adwaita-nativescript';

const banner = new AdwBanner();
banner.title = 'Metered connection — updates paused';
banner.buttonLabel = 'Resume';
banner.revealed = true;
// No `useMarkup` — the NS banner label is plain text (no rich-text subset).

Spinner

A lightweight, indeterminate loading indicator that spins continuously while visible. It signals that work is in progress without reporting how much remains, and scales to any size from an inline glyph to a page-filling placeholder.

Adw.Spinner

import Adw from '@girs/adw-1';
import Gtk from '@girs/gtk-4.0';

const spinner = new Adw.Spinner({
    widthRequest: 48,
    heightRequest: 48,
    halign: Gtk.Align.CENTER,
    valign: Gtk.Align.CENTER,
});

using Gtk 4.0;
using Adw 1;

Adw.Spinner {
  width-request: 48;
  height-request: 48;
}

<adw-spinner size="48"></adw-spinner>

import { AdwSpinner } from '@gjsify/adwaita-nativescript';

const spinner = new AdwSpinner();
spinner.size = 48;

Status Page

A centered, full-page placeholder for an empty, error, or welcome state. It pairs a large symbolic icon with a title and description, and can host a child action — a way out of the empty state, such as creating the first document.

Adw.StatusPage

import Adw from '@girs/adw-1';
import Gtk from '@girs/gtk-4.0';

const button = new Gtk.Button({
    label: 'New Document',
    halign: Gtk.Align.CENTER,
    cssClasses: ['pill', 'suggested-action'],
});

const statusPage = new Adw.StatusPage({
    iconName: 'folder-symbolic',
    title: 'No Documents',
    description: 'Documents you create or open will appear here.',
    child: button,
});

using Gtk 4.0;
using Adw 1;

Adw.StatusPage {
  icon-name: "folder-symbolic";
  title: _("No Documents");
  description: _("Documents you create or open will appear here.");

  child: Gtk.Button {
    label: _("New Document");
    halign: center;

    styles ["pill", "suggested-action"]
  };
}

<adw-status-page icon="folder" title="No Documents" description="Documents you create or open will appear here.">
    <adw-button label="New Document" pill suggested></adw-button>
</adw-status-page>

import { AdwButton, AdwStatusPage } from '@gjsify/adwaita-nativescript';

const button = new AdwButton();
button.text = 'New Document';
button.variant = 'suggested-action';

const page = new AdwStatusPage();
page.icon = folderSymbolic; // an Adwaita symbolic icon (SVG string)
page.title = 'No Documents';
page.description = 'Documents you create or open will appear here.';
page.setChild(button);

Window Title

A compact widget that pairs a title with an optional subtitle, sized and styled for a window’s header bar. The subtitle collapses when empty so a single-line title stays vertically centered.

Adw.WindowTitle

import Adw from '@girs/adw-1';

const windowTitle = new Adw.WindowTitle({
    title: 'Inbox',
    subtitle: '3 unread messages',
});

using Gtk 4.0;
using Adw 1;

Adw.WindowTitle {
  title: _("Inbox");
  subtitle: _("3 unread messages");
}

<adw-window-title title="Inbox" subtitle="3 unread messages"></adw-window-title>

import { AdwWindowTitle } from '@gjsify/adwaita-nativescript';

const windowTitle = new AdwWindowTitle();
windowTitle.title = 'Inbox';
windowTitle.subtitle = '3 unread messages';

Boxed Lists — the row widgets for settings and detail screens.
Feedback — toasts, dialogs and other transient status surfaces.
Adwaita Storybook — the same widgets in a live, interactive component browser.