Spinners and button
Loading records
Public HTML contracts
Components and states
These examples use semantic HTML and FrameBaseCSS only. JavaScript is required solely when application behavior cannot be supplied by a native element; the stylesheet never claims to provide that behavior.
Component matrix
| Component | Variants | States | Accessibility contract | JS required |
|---|---|---|---|---|
| Loading | spinner, bar, skeleton | busy, determined, indeterminate | aria-busy, status text | No |
| Toast | info, success, warning, danger | entering, open, closed | status, alert, live region | Lifecycle only |
| Dropdown | start, end, destructive | selected, disabled, open | native details or consumer menu keyboard model | Optional |
| Drawer | start, end, narrow, wide | open, closed | native dialog focus and accessible name | Open/close only |
| Data table | density, sticky, responsive | sorted, selected, loading, empty | caption, scopes, sort state | Data behavior |
| Composite input | addon, search, PIN, segmented | focus, disabled, invalid, success | labels and described-by text | Action behavior |
| Timeline | activity, audit, changelog | current and semantic states | ordered list and time element | No |
| Stepper | horizontal, vertical | complete, current, upcoming, error | ordered list and current step | No |
| Calendar | presentation grid | today, selected, disabled, outside | named group and native buttons | Selection behavior |
Class and state reference
| Family | Classes and attributes | Consumer behavior |
|---|---|---|
| Loading | .fb-spinner--sm, --md, --lg; .fb-loading-bar--indeterminate; skeleton text, title, avatar, card; aria-busy; --fb-progress | Update progress values and busy state. |
| Toast | .fb-toast--success, --warning, --danger; top/bottom regions; data-state | Create, announce, time, and dismiss messages. |
| Menu | .fb-dropdown--end; label, separator, shortcut, selected/checked, disabled, danger | Implement the full menu keyboard model when ARIA menu roles are used. |
| Drawer | .fb-drawer--start, --narrow, --wide; header, body, footer; open; data-state | Open, close, label, and restore focus. |
| Table | sticky header/first column; compact/comfortable; selected, expanded, detail, loading, empty, total; responsive | Sort, select, expand, load, and write matching data-label values. |
| Inputs | addon, search, segmented, PIN, drop area, inline, required, help, error, success | Copy, reveal, upload, validate, and move PIN focus. |
| Timeline | current, success, warning, danger and timestamp | No behavior required; optional details remain native. |
| Stepper | horizontal, vertical, complete, current, error; --fb-step-count | Keep current step and application progress synchronized. |
Loading states
Use visible text or an accessible status with every visual indicator.
Progress bars
Reserved layout while content loads
Toast notifications
Use role="status" for ordinary updates and
role="alert" only for urgent information. The consumer owns
creation, timing, focus decisions, and dismissal.
Deployment complete
Upload failed
Drawer
The drawer uses a native dialog. Application code calls
showModal() and close(); FrameBaseCSS supplies only
layout, animation, safe-area spacing, and size variants.
Advanced data table
Real table elements preserve relationships. On narrow screens the optional
responsive contract uses each cell's data-label as its visible
card label.
| Status | Actions | |||
|---|---|---|---|---|
| #184 | Passed | 42 s | ||
| #183 | Running | 1 m 18 s | ||
| Total runtime | 2 m | |||
Composite inputs
Addons and actions
Segmented control and PIN
File drop presentation
Required for notifications.
Icons, badges, timeline, and stepper
Icon contract and overlays
More than 99 notifications
Activity timeline
- Build passed
- Deploying
- Production verificationUpcoming
- Account
- Project
- Review
- Publish
Calendar presentation
This is a visual calendar grid, not a date-picker implementation.
August 2026
MonTueWedThuFriSatSun