Golden examples
Six copy-paste composite patterns that demonstrate canonical DS consumption. Each one is regression-tested with a vitest snapshot — a PR that breaks any example will be flagged with a clear diff.
1. Settings form
Composes Input, Select, Switch, Checkbox, ResponsiveFieldGroup, and Button into a single accessible form. Submit handler is a controlled callback.
2. Data table
Composes AdminSortableTable + TableToolbar + StatusBadge + Badge + Button into a searchable, sortable table with row actions.
Events
99+| Status | |||||
|---|---|---|---|---|---|
| Folk Prints Festival | Place des Festivals | 0 | 4500 | Draft | |
| Jazz au Lion d'Or | Lion d'Or — Montréal | 124 | 180 | Live | |
| Soirée Symphonique | Maison symphonique | 980 | 1200 | Sold out |
3. Modal with focus trap
Composes Modal + a keydown handler that intercepts Tab / Shift+Tab to cycle focus within the dialog. role="dialog", aria-modal, and Escape dismissal are inherited from the underlying Modal.
4. Detail page
Composes BreadcrumbBar + StatusBadge + Badge + Button + StatGrid into a header / metrics / body layout.
Jazz au Lion d'Or
Doors open at 19:30. Two-drink minimum.
5. Dark-mode card
Composes PaymentMethodCard + StatCard + Button + Badge on the dark surface token (bg-ep-bg-page-dark). Color tokens flip automatically in dark mode — no inline colors.
Billing overview
Manage payment methods and review account metrics.
Payment methods
- VisaDefault
•••• 4242
Expires 12/28
- Mastercard
•••• 5454
Expires 06/27
6. Accessible alert
Composes Alert + Button with all four variants. Errors get role="alert" (assertive live region); success / warning / info use role="status" (polite live region). Test assertions live in accessible-alert.test.tsx.
Notifications
Urgent errors are announced assertively; routine notifications politely.
Payment received
Your invoice was paid successfully.Heads up
Capacity for Jazz au Lion d'Or is at 80%.New feature
Dark mode is now available in account settings.Payment failed
We could not process the charge on your Visa ending in 4242.