MorphText

A text layer whose width moves on the spring while the old and new text cross-fade in place — one element that reshapes, never two labels swapped. First shipped use: the New deal search step's primary action, "Select record" ↔ "Create person".

27 September 2026: merged on main as !3957. Used live in DealSubjectStep's footer CTA (feat/acrm-322-vyber-zaznamu, main 40402b85).

Used in 1 file · 1 area · 1× — components/search

Default

export const Default = () => (
  <Button variant="primary">
    <MorphText text="Vybrat záznam" />
  </Button>
);

States

export const States = () => {
  const [picked, setPicked] = useState(false);
  return (
    <div style={row}>
      <Button variant="primary" onClick={() => setPicked((v) => !v)}>
        <MorphText text={picked ? 'Založit osobu' : 'Vybrat záznam'} />
      </Button>
    </div>
  );
};