# Draft Status 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. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-draft-status--introduction ## Variants documented in Storybook - Draft Status Type: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-draft-status--draft-status-type ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Draft Status. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Draft Status Type — Draft In Progress HTML: ```html
Income Certificate Application Step 3 of 5 Document Upload
Last saved: 10 Apr 2026
``` React: ```jsx import React from 'react'; const DraftStatusExample1Demo = () => ( <> {/* Variant: Draft Status - Draft In Progress */} {/* Draft In Progress */}
Income Certificate Application Step 3 of 5 Document Upload
Last saved: 10 Apr 2026
); export default DraftStatusExample1Demo; ``` Angular: ```html
Income Certificate Application Step 3 of 5 Document Upload
Last saved: 10 Apr 2026
``` ### 2. Draft Status Type — Expiring Soon HTML: ```html
Your draft expires in 5 days 16 Apr
``` React: ```jsx import React from 'react'; const DraftStatusExample2Demo = () => ( <> {/* Variant: Draft Status - Expiring Soon */} {/* Expiring Soon */}
Your draft expires in 5 days 16 Apr
); export default DraftStatusExample2Demo; ``` Angular: ```html
Your draft expires in 5 days 16 Apr
``` ### 3. Draft Status Type — Urgent Expiry HTML: ```html
Your draft expires tomorrow. Submit today
``` React: ```jsx import React from 'react'; const DraftStatusExample3Demo = () => ( <> {/* Variant: Draft Status - Urgent Expiry */} {/* Urgent Expiry */}
Your draft expires tomorrow. Submit today
); export default DraftStatusExample3Demo; ``` Angular: ```html
Your draft expires tomorrow. Submit today
``` ### 4. Draft Status Type — Expired Draft HTML: ```html
error_outline Draft expired on 9 April 2026
``` React: ```jsx import React from 'react'; const DraftStatusExample4Demo = () => ( <> {/* Variant: Draft Status - Expired Draft */} {/* Expired */}
error_outline Draft expired on 9 April 2026
); export default DraftStatusExample4Demo; ``` Angular: ```html
error_outline Draft expired on 9 April 2026
``` ### 5. Draft Status Type — Auto Saving HTML: ```html
Saving
``` React: ```jsx import React from 'react'; const DraftStatusExample5Demo = () => ( <> {/* Variant: Draft Status - Auto Saving */} {/* Auto Saving */}
Saving
); export default DraftStatusExample5Demo; ``` Angular: ```html
Saving
``` ### 6. Draft Status Type — Auto Saved HTML: ```html
check_circle Saved 3:14 PM
``` React: ```jsx import React from 'react'; const DraftStatusExample6Demo = () => ( <> {/* Variant: Draft Status - Auto Saved */} {/* Auto Saved */}
check_circle Saved 3:14 PM
); export default DraftStatusExample6Demo; ``` Angular: ```html
check_circle Saved 3:14 PM
``` ### 7. Draft Status Type — Saved Successfully HTML: ```html
check_circle Draft saved successfully at 3:14 PM
``` React: ```jsx import React from 'react'; const DraftStatusExample7Demo = () => ( <> {/* Variant: Draft Status - Saved Successfully */} {/* Draft Saved Successfully */}
check_circle Draft saved successfully at 3:14 PM
); export default DraftStatusExample7Demo; ``` Angular: ```html
check_circle Draft saved successfully at 3:14 PM
``` ### 8. Introduction — Introduction HTML: ```html
Components

Draft Status Bar

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.

Implementation Showcase

Visual demonstration of various Draft Status Bar types and save states.

General Draft Status

Income Certificate Application Step 3 of 5 Document Upload
Last saved: 10 Apr 2026

Expiration Warnings

Your draft expires in 5 days 16 Apr
Your draft expires tomorrow. Submit today
error_outline Draft expired on 9 April 2026

Auto-save States

Saving
check_circle Saved 3:14 PM

Success State

check_circle Draft saved successfully at 3:14 PM

CSS Class Reference

Quickly copy sizing and variant utility classes for Draft Status Bars.

Component Classes

Draft Progress Bar ux4g-draft-status-bar
Compact Save Bar ux4g-auto-draft-status-bar
Success Bar ux4g-success-draft-status-bar

Background Variants

Warning Background ux4g-bg-warning
Urgent Warning ux4g-bg-warning-strong
Soft Error ux4g-bg-error-soft
Success Background ux4g-bg-success
``` React: ```jsx import React from 'react'; const DraftStatusExample8Demo = () => ( <>
Components

Draft Status Bar

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.

Implementation Showcase

Visual demonstration of various Draft Status Bar types and save states.

General Draft Status

{/* Draft In Progress */}
Income Certificate Application Step 3 of 5 Document Upload
Last saved: 10 Apr 2026

Expiration Warnings

{/* Expiring Soon */}
Your draft expires in 5 days 16 Apr
{/* Urgent Expiry */}
Your draft expires tomorrow. Submit today
{/* Expired */}
error_outline Draft expired on 9 April 2026

Auto-save States

{/* Auto Saving */}
Saving
{/* Auto Saved */}
check_circle Saved 3:14 PM

Success State

{/* Draft Saved Successfully */}
check_circle Draft saved successfully at 3:14 PM

CSS Class Reference

Quickly copy sizing and variant utility classes for Draft Status Bars.

{/* Component Classes */}

Component Classes

Draft Progress Bar ux4g-draft-status-bar
Compact Save Bar ux4g-auto-draft-status-bar
Success Bar ux4g-success-draft-status-bar
{/* Background Variants */}

Background Variants

Warning Background ux4g-bg-warning
Urgent Warning ux4g-bg-warning-strong
Soft Error ux4g-bg-error-soft
Success Background ux4g-bg-success
); export default DraftStatusExample8Demo; ``` Angular: ```html
Components

Draft Status Bar

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.

Implementation Showcase

Visual demonstration of various Draft Status Bar types and save states.

General Draft Status

Income Certificate Application Step 3 of 5 Document Upload
Last saved: 10 Apr 2026

Expiration Warnings

Your draft expires in 5 days 16 Apr
Your draft expires tomorrow. Submit today
error_outline Draft expired on 9 April 2026

Auto-save States

Saving
check_circle Saved 3:14 PM

Success State

check_circle Draft saved successfully at 3:14 PM

CSS Class Reference

Quickly copy sizing and variant utility classes for Draft Status Bars.

Component Classes

Draft Progress Bar ux4g-draft-status-bar
Compact Save Bar ux4g-auto-draft-status-bar
Success Bar ux4g-success-draft-status-bar

Background Variants

Warning Background ux4g-bg-warning
Urgent Warning ux4g-bg-warning-strong
Soft Error ux4g-bg-error-soft
Success Background ux4g-bg-success
``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.