Feedback
Draft Status Banner
Draft Status Banner component displays a persistent notification indicating that content is currently in draft mode. It helps users distinguish unpublished content from published information.
Examples
Step 3 of 5 · Document Upload
Last saved: 10 Apr 2026Step 3 of 5 · Document Upload
AccessibilityWCAG 2.1 Level AA Compliant
Features4 checks
- Uses role="status" with aria-live="polite" so state changes are announced without stealing focus
- Color is never the only signal, every state carries descriptive text and a distinct icon
- Urgent expiry uses white-on-#fa8c16 text which meets AA contrast for 14px semibold
- Discard and Resume are real <button> elements, fully keyboard operable
When to use this component
✓Do's
- •A multi-step service form can be saved and resumed later
- •Drafts expire and the applicant must act before a deadline
- •You auto-save progress and want to confirm it visibly
✗Don'ts
- •Reporting a validation or submission error, use Alert
- •Showing a one-off transient confirmation, use Toast
- •Communicating overall application status post-submission, use Status Tracker
Do's and Don'ts
✓ Do's
Your draft expires in 5 days16 Apr
Show clear status with a concise message and expiry date. Use the warning background for time-sensitive drafts approaching deadline.
✗ Don'ts
Your draft expires tomorrow. Submit today
Avoid using the Urgent banner style for routine draft saves or non-critical deadlines. Keep banners borderless, using only a filled background with an 8px border radius.