AppBar macrolite

A top bar with a title, an optional subtitle and back button, and leading/trailing slots for controls.

Built from: Box Button Text
Children: none

Preview

Loading the renderer…

titlerequired

subtitle

back

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "AppBar",
          "title": "Settings",
          "back": true,
          "slots": {
            "trailing": "c0-more"
          }
        },
        {
          "id": "c0-more",
          "component": "Button",
          "icon": "ui-more",
          "label": "More",
          "variant": "ghost",
          "size": "icon"
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

AppBar rendered by the React renderer on Web — **Web** React

AppBar rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

AppBar rendered by the Compose renderer on Android — **Android** Compose

AppBar rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-app-bar, painted by each native renderer.

Props

Prop	Type	Default	Description
`title`requiredbind	`string`	–	The screen title.
`subtitle`bind	`string`	–	A muted line under the title.
`back`	`boolean`	`false`	Shows a back button that fires `back`.

Events and slots

Name	Kind
`on.back`	event: runs an action
`leading`	slot: one component by id
`trailing`	slot: one component by id

Accessibility

Role: banner
Semantics: banner (heading level 1 = the title). The title is heading level 1; the back button is labelled back ($a11y).

Keys	Action
–	Enter, Space on back

Theming

Recipe parts: AppBar/rootAppBar/backAppBar/bodyAppBar/titleAppBar/subtitle
Keyed by: :hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme