DateBadge

Planned

Square date label — 16px/800 day on top, 9px/700 uppercase month below. Positioned absolute top-left of EventCard thumbnail. White bg + card shadow.

Categorymolecules

Sourcepatterns/molecules/datebadge.html

AI HintUse for grouped UI patterns. Combine atoms into functional units.

Compact date label for event cards — day over month. Two visual modes: onImage and inRow.

DateBadge

Display molecule (planned)

Compact date label — 18px/800 day on top, 9px/700 uppercase month below. onImage variant floats over event thumbnails (white bg); inRow variant is a 48×48 square for agenda rows.

12JUN3SEP25DEC8JUIN

This component supports light and dark mode.

Status

Planned — not yet exported. The production component is not in the barrel yet; the render above is a typed placeholder. Two hand-rolled implementations (storefront/EventCard.tsx on-image, dashboard/UpcomingEvents.tsx in-row) will be consolidated when it ships.

Intended API

// Canonical zone-correct pattern — NEVER date.getDate() (viewer-timezone bug).
// import { dayInZone, monthInZone } from "@/components/dashboard/format";
<DateBadge
  day={dayInZone(event.start_at, event.timezone, locale)}
  month={monthInZone(event.start_at, event.timezone, locale)}
  variant="onImage"
  className="absolute left-3 top-3"
/>

Localization

Month text is locale-dependent and must arrive pre-formatted from the consumer — the badge itself is locale-agnostic. French abbreviations run 4+ characters ("JUIN", "SEPT"); do not assume 3-letter months. Format via dayInZone(date, tz, locale) / monthInZone(date, tz, locale) from storefront/src/components/dashboard/format.ts.

Props

Prop

Type

Default

Description

day*

string

—

Day of month, formatted in the event’s timezone (e.g. “12”).

month*

string

—

Uppercase short month, locale-dependent (e.g. “JUN” in en, “JUIN” in fr).

variant

'onImage' | 'inRow'

—

Visual mode — defaults to “onImage”.

ariaLabel

string

—

Full-month accessible name (e.g. “June 12, 2026”). Omit and use aria-hidden when the full date is adjacent.

className

string

—

Class passthrough for consumer positioning.

Props

Preview

DateBadge

Prop

Type

Required

Default

Description

day

string

Required

—

No description.

month

string

Required

—

No description.

Quick use:<DateBadge />

Accessibility

ARIA rolegroup

Usage

Import

tsxSnippet

import { DateBadge } from "@epasslive/design-system"

Example 1

tsxSnippet

<DateBadge day='12' month='JUN' />

Example 2

tsxSnippet

<DateBadge day={String(d.getDate())} month={monthShort(d.getMonth())} />

Anti-patterns

— Do not hardcode data in molecules

— Avoid complex business logic in molecules