DateBadge

molecules

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

ARIA Role: group

Demo

ActiveSuccessWarningErrorDefault

Props

PropTypeRequiredDefaultDescription
daystringYes—
monthstringYes—

TypeScript Interface

interface DateBadgeProps {
  day: string;
  month: string;
}

Assertions (NASA Rule 5)

  • [type]day and month required(NASA Rule 5)
  • [aria]Must have role='group' and aria-label='14 June' (machine-readable full date)(WCAG 1.3.1)

Usage

Import

import { Datebadge } from '@epasslive/design-system'

Basic

<Datebadge />

With Variants

<Datebadge variant="primary" size="md" />