BookedBadge

A booking, confirmed: the ink check beside the outcome on the card that closes an exchange. It lands with the one flourish on a booking — the badge pops, then the tick draws itself.

Playground

Booked · Lash fill · Friday, 10:00

Booking

Motion

It waits 350ms for its card to rise, pops the badge in over 500ms with a slight overshoot, and from 600ms draws the tick in 350ms. The timing lives in --animate-check-pop and --animate-check-draw (globals.css). It plays once, on mount — replay remounts it.

Settled

animate={false} renders it already in place — for a booking that was confirmed before you arrived, like a list of past bookings.

API reference

PropTypeDefaultDescription
animatebooleantruePop the badge and draw the tick on mount. False renders the settled state.
classNamestring—Layout only.

16px, like the avatars it sits among. On the booking card ChatCardBooking draws it for you and passes animate through.

Guidelines

  • It leads the booking card's one line, in the leaf tone: the check, the outcome in ink, then what was booked and when, divided by dots — “Booked · Lash fill · Friday, 10:00”. No timestamp: the appointment's time is the only one on the card.
  • The outcome is one word — “Booked”, “Moved” — and nothing under the line repeats it. Only the outcome is in ink; the rest keeps the header's grey.
  • The pop is the one flourish on a booking — keep it for the moment a booking is confirmed, once. Everywhere else it sits settled. The motion is motion-safe: under reduced motion the badge is simply there.
  • The badge is decorative and hidden from assistive tech; the outcome beside it says it.