Skip to content

Page

A rich page wrapper that adds breadcrumbs, badges, KPI tiles, toolbar, and header/footer slots around its content. Use it when you need more than Form provides.

@Builder
public record Page(
String id,
String pageTitle,
String favicon,
String title,
String subtitle,
List<Breadcrumb> breadcrumbs,
Component avatar,
List<Component> content,
List<Component> header,
List<Component> footer,
List<UserTrigger> toolbar,
List<UserTrigger> buttons,
List<Badge> badges,
List<KPI> kpis,
String style,
String cssClasses,
List<Action> actions)
implements Component, ActionSupplier { }
PropertyTypeDefaultDescription
idStringComponent ID
pageTitleStringBrowser tab title
faviconStringBrowser favicon URL
titleStringPage heading
subtitleStringSubheading
breadcrumbsList<Breadcrumb>Navigation breadcrumb trail
avatarComponentAvatar shown in the header
contentList<Component>Main body
headerList<Component>Above the content
footerList<Component>Below the content
toolbarList<UserTrigger>Toolbar action buttons
buttonsList<UserTrigger>Bottom action buttons
badgesList<Badge>Status badges in the header
kpisList<KPI>KPI tiles shown below the title
actionsList<Action>Registered actions for this page
styleStringInline CSS
cssClassesStringCSS class names
return Page.builder()
.title("Invoice #1234")
.subtitle("Created 2025-01-15")
.breadcrumb(new Breadcrumb("Home", "/"))
.breadcrumb(new Breadcrumb("Invoices", "/invoices"))
.breadcrumb(new Breadcrumb("#1234", "/invoices/1234"))
.contentItem(invoiceContent)
.build();
return Page.builder()
.title("Order #5678")
.kpiItem(KPI.builder().label("Total").value("€ 1,250").build())
.kpiItem(KPI.builder().label("Items").value("7").build())
.badgeItem(Badge.builder().label("PAID").variant(BadgeVariant.success).build())
.contentItem(orderContent)
.build();
return Page.builder()
.title("Customer")
.actionItem(Action.builder().id("save").build())
.actionItem(Action.builder().id("delete").confirmationRequired(true).build())
.contentItem(customerForm)
.build();