admin4 components and tokens
Part 8, reference 31. The administration styles every page with one set of shared component classes (.a4-*) and one
set of design tokens (--a4-*), defined in components.css of the admin designs. An extension's admin pages use
them too. The complete reference, with every class, state and token, is
Styling the administration; how to convert an old extension's pages is
admin4 styling for extension pages.
Components used most
| Need | Classes |
|---|---|
| Page wrapper | .a4-page |
| Page title with actions | .a4-pagehead > .a4-pagehead-main (.a4-pagehead-title, .a4-pagehead-sub) + .a4-pagehead-actions |
| Card | .a4-card > .a4-card-head, .a4-card-body, .a4-card-foot; states .is-ok, .is-warn, .is-bad, .is-info, .is-flush |
| Buttons | .a4-btn, .a4-btn-primary, .a4-btn-danger, .a4-btn-ghost, .a4-btn-small; .a4-actions for a row |
| Toolbar | .a4-toolbar (.is-bottom, .is-sticky) |
| Table | .a4-table-wrap > table.a4-table (.is-compact) |
| Form | .a4-field > .a4-label + .a4-input; .a4-field-error; .a4-check, .a4-radios |
| Messages | .a4-notice with .is-ok, .is-warn, .is-bad, .is-info |
| Status | .a4-badge, .a4-tag with the same states; .a4-status with .a4-dot |
| Empty list | .a4-empty |
| Utilities | .a4-sr-only, .a4-muted, .a4-meta, .a4-help, .a4-nowrap, .a4-code |
| Icons | .a4-icon with .a4-bi-<name> |
States are .is-* classes on the component.
Tokens used most
| Group | Tokens |
|---|---|
| Text | --a4-ink, --a4-muted |
| Surfaces | --a4-surface, --a4-card, --a4-soft |
| Lines | --a4-line, --a4-line-strong |
| Accent | --a4-accent, --a4-accent-strong (fills with white text), --a4-accent-text (text), --a4-accent-soft |
| States | --a4-ok, --a4-warn, --a4-bad, --a4-info, each with -bg and -line |
| Spacing | --a4-space-1 to --a4-space-7 (4, 8, 12, 16, 24, 32, 48 px) |
| Radius | --a4-radius-s |
| Type | --a4-font, --a4-mono, --a4-text-xs to --a4-text-3xl |
| Controls | --a4-control-h |
Every color token has a dark value; the mode is html[data-a4-theme="light"] or "dark", and a rule built from tokens
needs nothing for dark mode.
Rules for extension pages
- No
<style>and nostyle=""in templates. - Components first; your own classes only for what they cannot do, with your extension's prefix.
- Only tokens for colors, spacing, radius and type; no local aliases, no hard-coded values.
- Your stylesheet goes into
design.ini [StylesheetSettings] BackendCSSFileList[]. - Check light and dark mode, at normal width and at 200% zoom.
Related pages
- Previous: The expui JavaScript API
- Next: The help system for extensions
- Admin pages in the admin4 style
- admin4 tokens, admin4 components
- Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.
Become an Exponential Partner
Partners share their information, provide funding, contribute back and develop the products with us, and that is how Exponential grows. A partner website and dashboard are planned for mid-2027: please become a partner today to speed up our growth rate and land new features faster.