Extending the system

import"@truvar-ai/design-system"

Extending the system

When you need something React Aria doesn't ship, you either add behaviour to an existing component or compose a new one from its primitives. Both keep the accessibility work done for you.

Custom behaviour

Built on Button + local state

ConfirmButton wraps our Button. First press arms it, second press confirms. It disarms after 4 seconds or when focus leaves.

export function ConfirmButton({ onConfirm, children }) {
  const [armed, setArmed] = useState(false);
  const m = useMessages(); // built-in English + Arabic strings
  return (
    <Button variant="danger"
      onPress={() => armed ? onConfirm() : setArmed(true)}
      onBlur={() => setArmed(false)}>
      {armed ? m.pressAgain : children}
    </Button>
  );
}

New component

Built on RadioGroup + Radio

React Aria has no rating control. Rating is composed from RadioGroup, so arrow keys, form values and screen-reader labels work with no extra code. It's drawn with the orbit dots from the mark.

export function Rating({ label, max = 5, onChange }) {
  return (
    <RadioGroup orientation="horizontal" onChange={onChange}>
      <Label>{label}</Label>
      {range(1, max).map((n) => (
        <Radio key={n} value={String(n)} aria-label={m.of(n, max)}
          className="tv-rating-dot" />
      ))}
    </RadioGroup>
  );
}