Components
React components built on native HTML wherever the platform already does the job, and on Base UI where it does not. They are styled only with the tokens, ship one entry point each, and are tested for behavior and accessibility on every build.
All components
-
Button
The action a screen or a card exists for, in four weights and two sizes.
-
Icon button
A round button that shows only an icon, with a name for screen readers.
-
Badge
A small count or dot on a navigation item, an icon button or a tab.
-
Status
The state of an order, a delivery or an invoice, as a dot or a chip.
-
Switch
Turns a setting on or off at once. It works in forms and without JavaScript.
-
Checkbox
A choice that is confirmed later, alone or in a list where all can be selected at once.
-
Segmented control
A choice of one among a few options, shown side by side.
-
Text field and select
Text fields and selects, each with its label, help and error.
-
Notice
A message inside the page that stays until the situation changes.
-
Toast
Short feedback on something that just happened, with an undo when it helps.
-
Menu
A list of actions or choices that opens from a button.
-
Tooltip
A short label shown on hover and focus, mostly for icon buttons.
-
Dialog
A window that asks for a decision, or a side panel or a bottom sheet.
-
Scroll area
Content that scrolls inside a fixed height, with a thin indicator instead of a scrollbar.
-
Card
The unit of the overview: a title, a summary figure, content and a way to the full page.
-
Card link
The link at the foot of a card to the page it summarizes.
-
Card scroll
The list in a card that scrolls first when the card’s size leaves no room.
-
Unit menu
The unit a card’s figures are shown in, as a pill that opens a menu.
-
Tick bar
A share of a whole as a row of fine ticks.
-
Ring chart
Parts of a whole as a ring of ticks.
-
Trend chart
A daily series as a line, with its running total.
-
Chart legend
The key to a chart’s colors.
-
Search field
A search box whose results open under it as people type.
-
Search result
One row of results: an icon, a title, a line under it and a status.
How they come together in the overview, its cards, charts and search, is in Patterns.
How they are built
- Native HTML first. Buttons, switches, checkboxes, radios, fields, selects and dialogs are the browser’s own elements. They work before any script loads, in forms, with every assistive technology, and they cost almost nothing to ship.
- Base UI for complex behavior. Menus and tooltips need positioning, focus management and typeahead the platform does not offer everywhere yet. Base UI, maintained full-time by the MUI team, provides that behavior unstyled.
-
Plain CSS on tokens. Each component has one stylesheet in the
sonar.componentscascade layer. Variants are data attributes; values are tokens only. No CSS-in-JS, no utility framework, and an app’s own styles always win without!important. -
One entry point per component. An app imports
@orbex/sonar-components/buttonand its stylesheet and loads nothing else. All 24 weigh 47.8 KB gzipped together, script and styles.
Install
Installing the packages, setting the cascade layers and importing the tokens are on one page: Installation. Each component page ends with its own import and its API; the props of every component are also published as data at /api.json.
Quality gates
- Types: strict TypeScript, and the declarations ship with the package.
- Behavior: every component is tested in a DOM with Testing Library: roles, names, keyboard and state.
- Accessibility: axe runs on every rendered component in the tests; contrast is enforced on the tokens, where it is decided.
- Weight: the build fails when a component’s script and styles pass 3 KB gzipped. Two entry points have a larger budget, named in the build with its reason: the trend chart and the card (Card, Card link, Card scroll and Unit menu), at 4 KB.
- Versions: tokens and components are released together with Changesets, so one version names one consistent system.