Alert
Informational, success, warning and danger states.
Information
Saved
Review needed
Validation failed
Java composition
new Div().withChild(Alert.info("Information")).withChild(Alert.success("Saved")).withChild(Alert.warning("Review needed")).withChild(Alert.danger("Validation failed"));Badge
Short status labels with explicit text.
DraftReviewed
Java composition
new Paragraph().withChild(Badge.info("Draft")).withChild(Badge.success("Reviewed"));Tag
A content category, not a clickable filter.
Java
Java composition
Tag.create("Java").withColor("success");Label
A compact textual label.
Java composition
Label.create("Server-rendered");Spinner
A visible loading indicator; this specimen is not a background request.
Java composition
Spinner.create().small();ProgressBar
A 72 percent specimen with semantic progress information.
Java composition
ProgressBar.create(72).success();InfoBox
An explicitly illustrative metric, not site telemetry.
Example queue
12
Java composition
InfoBox.create().withTitle("Example queue").withValue("12");Card
A header/body surface.
Review queue
Three example documents await review.
Java composition
Card.create().withHeader("Review queue").withBody("Three example documents await review.");CardGrid
Cards composed into a responsive grid.
Draft
Write
Review
Read
Java composition
CardGrid.create().withColumns(2).addCard(Card.create().withHeader("Draft").withBody("Write")).addCard(Card.create().withHeader("Review").withBody("Read"));Table
A manually specified table.
| Boundary | Owner |
|---|---|
| Escaping | Framework |
| Authorization | Application |
Java composition
Table.create().withHeaders("Boundary", "Owner").addRow("Escaping", "Framework").addRow("Authorization", "Application").bordered();DataTable
Columns are typed functions over application data.
| Stage |
|---|
| Compose |
| Render |
Java composition
DataTable.create(String.class).addColumn("Stage", value -> value).withData(List.of("Compose", "Render")).striped();OrderedList
An ordered workflow.
- Compose
- Compile
- Render
Java composition
OrderedList.create().addItem("Compose").addItem("Compile").addItem("Render");UnorderedList
An unordered collection.
- Java
- HTML
Java composition
UnorderedList.create().addItem("Java").addItem("HTML");Modal
Load an actual framework modal, close it, and return focus to the trigger.
Java composition
new Div().withChild(Button.create("Open dialog")
.withAttribute("hx-get", "/demos/fragments/modal").withAttribute("hx-target", "#catalog-modal-host"))
.withChild(new Div().withId("catalog-modal-host"));
// GET /demos/fragments/modal returns:
Modal.create().withModalId("catalog-modal").withTitle("A server-rendered dialog").withBody(new Paragraph("Escape closes this dialog.")).render();