Orbex Sonar-DB Design system

Unit menu

The unit a card’s figures are shown in, as a small pill that opens a menu: pallets, kilograms or items, dollars or euros. Changing it converts every figure in the card; it is the card’s only setting.

  • Native HTML
  • 4.8 KB gzipped · script and styles
  • Shared with Card, Card link, Card scroll
  • @orbex/sonar-components/card

Examples

A figure that follows its unit
2,800 plt
Code
tsx 
import { UnitMenu } from '@orbex/sonar-components/card'
import { useState } from 'react'

const units = [
  { value: 'plt', short: 'plt', name: 'Pallets' },
  { value: 'kg', short: 'kg', name: 'Kilograms' },
  { value: 'items', short: 'items', name: 'Items' },
]
const perPallet: Record<string, number> = { plt: 1, kg: 420, items: 36 }

/* Changing the unit converts every figure the card shows */
export default function Units() {
  const [unit, setUnit] = useState('plt')
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <span style={{ font: 'var(--sonar-type-title-md)', fontVariantNumeric: 'tabular-nums' }}>
        {`${(2800 * perPallet[unit]!).toLocaleString('en-US')} ${unit}`}
      </span>
      <UnitMenu label="Unit" value={unit} options={units} onValueChange={setUnit} />
    </div>
  )
}

Sizes, variants and states

The pill at rest, hovered, focused and pressed
Changing the unit, on a desktop card and a phone card

Usage

  • At the end of the card’s header, and only there. Load menu.css with card.css: the pill opens a Menu.
  • The pill shows the short code (plt, kg, USD); the menu shows the full names.
  • The choice is per card: each team counts in its own unit.

Do and don’t

DoThe unit is the card’s only setting, at the end of its header.
Don’tSeveral settings in a card header: unit, period and sort compete with the title.
DoA short code on the pill; the full name in the menu.
Don’tFull words on the pill: it grows and crowds the title.

Accessibility

Keyboard

Key What it does
Tab Moves focus to the pill.
Enter, Space or Down arrow Opens the menu on the chosen unit.
Up and Down arrows Move between units; typing a letter jumps to it.
Enter or Space Chooses the unit and closes the menu; focus returns to the pill.
Escape Closes the menu without a change.

Roles and attributes

Element or attribute What it gives
aria-label on the trigger What it measures and what the pill shows: “Unit: plt, Pallets”, so voice control can reach it by its visible text.
aria-haspopup and aria-expanded From Base UI: the pill says it opens a menu, and whether it is open.
role="menuitemradio" The units are a group of radio items under a label; the chosen one is checked.

Notes

  • The pill is named with what it measures and what it shows, so “Unit: plt, Pallets” is both read and reachable by voice.

Use it

Unit menu shares its entry point and stylesheet with Card, Card link, Card scroll. The tokens and the cascade layers are set once for the app: see Installation.

tsx 
import { UnitMenu } from '@orbex/sonar-components/card'
import '@orbex/sonar-components/card.css'

API

Prop Type Default
label Required

What the unit measures, read with the current value: “Unit: plt, Pallets”.

 string —
value Required

The value of the unit shown, one of the options' values. The menu is always controlled.

 string —
options Required

The units to choose from: a short code, shown in caps on the pill and in the menu, and the full name, read with it.

 { value: string; short: string; name: string }[] —
onValueChange Required

Called with the value of the unit chosen. The card converts its figures; the menu closes on its own.

 (value: string) => void —