Status Mark
48px outcome circle with soft (default) or surface chrome.
Page and auth outcome heroes share this circle. Statuses use the same semantic vocabulary as Alert: default, info, success, warning, and error. soft (default) is a tinted fill + border and should be used inside Card. surface is the light/dark paper fill reserved for booking response heroes inside CardFrameHeader. Use icon when the glyph is domain-specific (calendar, users, mail, pay, credit card).
import { StatusMark } from "@coss/ui/shared/status-mark";Example
Soft inside a card vs surface inside a booking response header.
StatusMark · soft in cards + surface in CardFrameHeader
default
info
success
warning
error
This meeting is scheduled
surface — booking response header
<StatusMark status="error" /><StatusMark
variant="surface"
status={bookingStatus === "cancelled" ? "error" : bookingStatus === "confirmed" ? "success" : "default"}
icon={bookingStatus === "pending" ? <CalendarIcon className="size-5" /> : undefined}
className="mx-auto"
/>API
| Prop / part | Type | Notes |
|---|---|---|
status | "default" | "info" | "success" | "warning" | "error" | Alert-style semantic tone and 24px preset icon. Defaults to default. |
variant | "soft" | "surface" | soft (default): tinted fill + border, including inside Card. surface: paper fill + border, generally only inside CardFrameHeader. |
icon | ReactNode | Optional custom icon. Direct SVGs inherit the status tone and normalize to 24px. |
className | string | Merged onto the circle. |
Call sites
| File | Variant | Notes |
|---|---|---|
apps/web/modules/auth/error-view.tsx | soft | Auth login error |
apps/web/modules/auth/logout-view.tsx | soft | Signed-out check |
apps/web/modules/bookings/components/DecoyBookingSuccessCard.tsx | soft | Decoy booking success |
apps/web/modules/bookings/views/booking-dry-run-success-view.tsx | soft | Dry-run success |
apps/web/components/booking/CancelBooking.tsx | soft | Cancel error hero |
apps/web/modules/videos/views/videos-no-meeting-found-single-view.tsx | soft | Missing meeting error card |
apps/web/modules/videos/views/videos-meeting-not-started-single-view.tsx | soft | Upcoming meeting information card |
apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx | soft | Meeting-ended error hero |
apps/web/modules/bookings/views/booking-success-view.tsx | surface | Booking confirmation hero |
apps/web/modules/events/views/event-registration-confirmation-view.tsx | surface | Cal Events RSVP confirmation |
packages/features/cal-events/components/event-page/sections/event-registration-section-parts.tsx | soft | Post-join status inside the public registration card |
apps/web/modules/event-types/components/event-type-preview-success.tsx | surface | Event-type editor preview |
apps/web/modules/auth/verify-view.tsx | soft | Card-contained neutral MailOpen, success check, and error X |
apps/web/app/(booking-page-wrapper)/(booking-page-themed)/payment/[uid]/payment-page.tsx | surface | Pay icon via icon |
apps/web/modules/events/views/event-checkout-view.tsx | surface | Credit card via icon |
Example URLs
Not exhaustive — a few places you can open locally (e.g. http://localhost:3000) to see this in product.
| Path | Notes |
|---|---|
/auth/error | Soft error mark |
/auth/logout | Soft muted check |
/booking/<uid> | Surface booking confirmation |
/auth/verify | Soft mail, success, and error marks inside a card |
/payment/<uid> | Surface payment hero |
/video/no-meeting-found | Soft missing-meeting error card |
/video/meeting-not-started/<uid> | Soft upcoming-meeting information card |
/video/meeting-ended/<uid> | Soft meeting-ended error |
/booking/dry-run-successful | Soft dry-run success |
Source
On This Page