BMX Web Components

<script src="/assets/bmx-components.min.js"></script>

<bmx-button tone="primary" ripple="wave">Save changes</bmx-button>
<bmx-button variant="outline" tone="neutral">Cancel</bmx-button>
<bmx-button variant="soft" tone="danger" confirm="Click again to delete">Delete</bmx-button>

Accordion

<bmx-accordion>

A set of `bmx-accordion-item`s that know about each other.

Accordion Item

<bmx-accordion-item>

A heading with a panel under it that opens and closes.

Annotation Studio

<bmx-annotation-studio>

Image labelling for machine-learning training data.

Api Explorer

<bmx-api-explorer>

An OpenAPI console in the page.

Audio Editor

<bmx-audio-editor>

A multitrack audio editor in the page.

Avatar

<bmx-avatar>

A person, drawn small.

Avatar Group

<bmx-avatar-group>

The overlapping stack of faces that says who is on something.

Badge

<bmx-badge>

A count or a state, attached to something else.

Barcode

<bmx-barcode>

A barcode drawn from a value.

Barcode Scanner

<bmx-barcode-scanner>

A form field for a barcode value.

Breadcrumb

<bmx-breadcrumb>

The trail back out of wherever you are, which shortens itself rather than wrapping or scrolling when there is not room for all of it.

Breadcrumb Item

<bmx-breadcrumb-item>

One step of a trail.

Button

<bmx-button>

The library's workhorse, and the component every other one borrows its conventions from.

Button Group

<bmx-button-group>

Three widgets in one tag, because they differ only in bookkeeping.

Calendar

<bmx-calendar>

A diary.

Caption Editor

<bmx-caption-editor>

Captions and subtitles made and corrected in the page, against the media they belong to.

Carousel

<bmx-carousel>

A strip of slides the reader moves through.

Chart

<bmx-chart>

Twenty-two kinds of chart, drawn by the library with no charting package.

Chat

<bmx-chat>

A conversation, for an AI assistant or a support desk.

Checkbox

<bmx-checkbox>

A single checkbox with the same chrome as the rest of the form family.

Chip

<bmx-chip>

A small labelled thing.

Chip Set

<bmx-chip-set>

A row of chips that behaves as one thing.

Code Diff

<bmx-code-diff>

The differences between two texts, side by side or in one column.

Code Editor

<bmx-code-editor>

A code editor in the page.

Color Picker

<bmx-color-picker>

A colour field, or a colour panel in the page.

Combobox

<bmx-combobox>

A text field that filters a list as you type.

Command Palette

<bmx-command-palette>

Every action in an application, one keystroke away.

Configurator

<bmx-configurator>

Configure, price, quote.

Dashboard

<bmx-dashboard>

A dashboard layout.

Data Grid

<bmx-data-grid>

A data grid for business applications.

Data Importer

<bmx-data-importer>

CSV, TSV, Excel and JSON in; clean, checked rows out - all in the browser.

Data Mapper

<bmx-data-mapper>

Draw how data in one shape becomes data in another.

Data Profiler

<bmx-data-profiler>

Data profiling and data quality in the page.

Date Picker

<bmx-date-picker>

A date typed into a field or chosen from a calendar, one date or a range, with named presets and an optional time.

Decision Table

<bmx-decision-table>

Business rules as a DMN decision table.

Diagram

<bmx-diagram>

A diagram designer.

Dialog

<bmx-dialog>

A modal window.

Dock Layout

<bmx-dock-layout>

A docking workspace, as in an IDE or a trading desk.

Document Compare

<bmx-document-compare>

A redline of two versions of a document - Word (.docx), PDF, HTML, Markdown or plain text, in any mix - side by side or inline, with every change listed and decided.

Document Signer

<bmx-document-signer>

Prepare a PDF for signing and sign it in the page.

Drawer

<bmx-drawer>

A panel that slides in from an edge.

Driver Tree

<bmx-driver-tree>

A KPI driver tree and what-if model.

Email Designer

<bmx-email-designer>

Builds marketing and transactional emails by dragging blocks - headings, text, buttons, images, dividers, spacers and lines of links - into rows of one to three columns, and sen…

File Manager

<bmx-file-manager>

A file manager.

Filter Panel

<bmx-filter-panel>

Faceted search for any list.

Floor Plan

<bmx-floor-plan>

Desks, meeting rooms, seats, parking bays and lockers on a floor plan.

Form

<bmx-form>

A form drawn from JSON.

Form Designer

<bmx-form-designer>

The designer for `bmx-form`.

Formula Bar

<bmx-formula-bar>

A formula editor as a spreadsheet's formula bar has it.

Formula Engine

<bmx-formula-engine>

A spreadsheet calculation engine as an element.

Gallery

<bmx-gallery>

A picture gallery with a viewer.

Gantt

<bmx-gantt>

A project plan.

Gauge

<bmx-gauge>

One value on a scale.

Graph

<bmx-graph>

A network graph.

Graph Overview

<bmx-graph-overview>

A small picture of a whole `bmx-graph`, with a box showing the part in view.

Image Editor

<bmx-image-editor>

A picture editor for the page.

Infinite Canvas

<bmx-infinite-canvas>

An infinite canvas for visual collaboration.

Input

<bmx-input>

A single-line text field with everything an enterprise form needs around it.

Json Editor

<bmx-json-editor>

One JSON document, three ways to work on it, and a fourth to see what changed.

Label Designer

<bmx-label-designer>

A label designer for the page.

Lineage Graph

<bmx-lineage-graph>

Data lineage you can explore, for data catalogues, data platforms and governance tools.

Log Stream

<bmx-log-stream>

A log and audit viewer for the browser.

Map

<bmx-map>

A map drawn by the library, with no tile server and nothing fetched.

Media Player

<bmx-media-player>

A video and audio player for training, help centres, product tours, town halls, podcasts and recorded meetings, built on the browser's own media element so it plays whatever the…

Menu

<bmx-menu>

A menu of commands.

Menu Item

<bmx-menu-item>

One entry of a `bmx-menu`, written in markup rather than passed as data.

Mind Map

<bmx-mind-map>

A mind map you build from the keyboard as fast as you can think.

Model Viewer

<bmx-model-viewer>

Shows a 3D model in the page.

Notification Center

<bmx-notification-center>

The inbox every application ends up needing.

Option

<bmx-option>

One option for a `bmx-select`, written in markup rather than passed as data.

Org Chart

<bmx-org-chart>

A hierarchy drawn as a diagram, with the curved connectors people know.

Pagination

<bmx-pagination>

Which page of a long list you are looking at, and how to get to another one.

Panorama Viewer

<bmx-panorama-viewer>

A 360-degree picture you look around in, and tours of several joined by hotspots.

Pdf Viewer

<bmx-pdf-viewer>

A PDF, shown in the page.

Permission Matrix

<bmx-permission-matrix>

Who may do what, on one screen.

Pert Chart

<bmx-pert-chart>

The plan as a network.

Pivot Chart

<bmx-pivot-chart>

A chart of a `bmx-pivot-grid`'s totals that follows the pivot.

Pivot Grid

<bmx-pivot-grid>

A multi-dimensional pivot grid.

Pivot Slicer

<bmx-pivot-slicer>

A slicer for a `bmx-pivot-grid`.

Planning Grid

<bmx-planning-grid>

Budgeting and forecasting in the page.

Popover

<bmx-popover>

A small panel of *content* hung off a control.

Process Explorer

<bmx-process-explorer>

Process mining in the browser.

Progress

<bmx-progress>

How far through something is.

Property Grid

<bmx-property-grid>

Inspect and edit any object.

Qr Code

<bmx-qr-code>

A QR code for a link, a Wi-Fi network, a contact card, a payment reference or any text, made in the page.

Query Builder

<bmx-query-builder>

A visual query builder.

Radio

<bmx-radio>

One option inside a `bmx-radio-group`.

Radio Group

<bmx-radio-group>

One answer from several.

Rating

<bmx-rating>

A row of stars that submits a number.

Reconciliation

<bmx-reconciliation>

Two lists of money movements side by side - a bank statement and the ledger, invoices and payments, a card feed and expense claims, an intercompany pair - matched by rules and b…

Recurrence Editor

<bmx-recurrence-editor>

The "repeat" part of a meeting, a report schedule, a maintenance window or a recurring invoice.

Report Designer

<bmx-report-designer>

The report designer.

Report Viewer

<bmx-report-viewer>

A report, laid out in pages and shown the way it will print.

Review Layer

<bmx-review-layer>

Comments pinned to the page.

Rich Text Editor

<bmx-rich-text-editor>

A rich text editor that keeps everything in the page.

Risk Matrix

<bmx-risk-matrix>

A risk register on a likelihood-by-impact heat map, for governance, risk and compliance, internal audit, programme offices and insurers.

Scheduler

<bmx-scheduler>

A resource scheduler.

Select

<bmx-select>

A list of options behind a closed control.

Shift Roster

<bmx-shift-roster>

A workforce roster.

Signature Pad

<bmx-signature-pad>

A signature, drawn with a pen, a mouse or a finger, that goes into a form like any other field.

Skeleton

<bmx-skeleton>

The grey shapes that hold a layout together while its content is on its way.

Slider

<bmx-slider>

A value chosen along a track, or a range chosen between two of them.

Sparkline

<bmx-sparkline>

A trend the size of a word, for a table cell, a card or a sentence.

Split Button

<bmx-split-button>

A default action joined to a menu of alternatives - "Save" with "Save as…" and "Save a copy" behind the chevron.

Splitter

<bmx-splitter>

Two panes and a divider the reader can move.

Spreadsheet

<bmx-spreadsheet>

A spreadsheet in the page.

Step

<bmx-step>

One step of a `bmx-stepper`.

Stepper

<bmx-stepper>

A task in steps - a wizard, a checkout, an onboarding - with a step list that shows where the reader is, what is done and what needs attention, and Back and Next buttons.

Switch

<bmx-switch>

An on/off control for a setting that takes effect immediately, with the same chrome as the rest of the form family around it.

Tab Panel

<bmx-tab-panel>

One panel inside a `bmx-tabs`, and the whole of what an author writes.

Tabs

<bmx-tabs>

One panel showing at a time, with a strip of tabs to choose it.

Task Board

<bmx-task-board>

The plan as cards in columns.

Terminal

<bmx-terminal>

A terminal in the page.

Textarea

<bmx-textarea>

Multi-line text, with the same chrome as `bmx-input` and the same rules about when a problem may be shown - both come from `src/components/field`, so a form built from the two r…

Timeline

<bmx-timeline>

A timeline.

Timeline Navigator

<bmx-timeline-navigator>

A strip under (or over) a `bmx-timeline` showing all of its time at once.

Timeseries

<bmx-timeseries>

A time-series explorer for millions of points.

Toast

<bmx-toast>

A short message about something that has already happened.

Toolbar

<bmx-toolbar>

A bar of controls that does not break when the window does.

Tooltip

<bmx-tooltip>

A short description of the thing beside it, shown on hover and on focus.

Tour

<bmx-tour>

A guided walk through an application.

Tour Step

<bmx-tour-step>

One step of a `bmx-tour`.

Trace Viewer

<bmx-trace-viewer>

A distributed-trace viewer in the page, for observability portals, support tools and incident write-ups.

Transfer List

<bmx-transfer-list>

Two lists side by side - what is available and what is chosen - and the moves between them.

Upload

<bmx-upload>

A file field that takes a drop as readily as a click, and then shows the user what became of every file they gave it.

Workflow Designer

<bmx-workflow-designer>

Draws approval and process workflows.

Workflow Engine

<bmx-workflow-engine>

Runs a workflow in the page.