BMX Web Components

A commercial component library built on web standards. One <script> tag registers every <bmx-*> element, and the browser renders them — so the same markup works in plain HTML, React, Angular and Vue, with typed wrappers supplied for all three.

A button in one line

Save changes

Cancel

Delete

Show markup

<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>

Components

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.

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.

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.

Carousel

<bmx-carousel>

A strip of slides the reader moves through.

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.

Combobox

<bmx-combobox>

A text field that filters a list as you type.

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.

Dialog

<bmx-dialog>

A modal window.

Drawer

<bmx-drawer>

A panel that slides in from an edge.

Input

<bmx-input>

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

Menu Item

<bmx-menu-item>

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

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.

Popover

<bmx-popover>

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

Progress

<bmx-progress>

How far through something is.

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.

Select

<bmx-select>

A list of options behind a closed control.

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.

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.

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.

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…

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.

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.

What you get

Framework-neutral

Standards-based custom elements. Generated React, Angular and Vue wrappers that carry no component code, and a documented path for Blazor, ASP.NET MVC and any server-rendered template.

WCAG 2.2 AA

Real elements rather than ARIA impersonations, one focus indicator across the library, and full keyboard patterns.

Ten themes

Switchable per page or per panel, and retintable from a dozen custom properties with no build step.

One file

No bundler, no module graph, no CDN account. Drop one script tag on a page and every element works.