Draft Mode Indicator
Workflow
Visual indicator for draft vs live mode status with toggle functionality. Supports badge, banner, and switch variants with color-coded feedback.
Preview
Interactive switch variant
Mode:Draft
Variants
Three display styles for different contexts
Badge Variant
Draft
Live
Banner Variant (Draft Only)
Draft Mode Active
Changes are not live. Click "Publish" to make changes visible.
Switch Variant (Interactive)
Mode:Draft
Props
DraftModeIndicator component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
isDraft* | boolean | — | Whether currently in draft mode |
onToggle | (isDraft: boolean) => void | — | Callback when mode is toggled |
variant | 'badge' | 'banner' | 'switch' | 'badge' | Display variant |
showWarning | boolean | true | Show warning message in banner variant |
className | string | — | Additional CSS classes for the container |
Usage
Import and implementation example
import { DraftModeIndicator } from '@/components/ui/draft-mode-indicator'
export default function Example() {
const [isDraft, setIsDraft] = useState(true)
return (
<>
{/* Simple badge */}
<DraftModeIndicator isDraft={true} variant="badge" />
{/* Banner with publish action */}
<DraftModeIndicator
isDraft={true}
variant="banner"
onToggle={() => publishChanges()}
/>
{/* Interactive switch */}
<DraftModeIndicator
isDraft={isDraft}
variant="switch"
onToggle={setIsDraft}
/>
</>
)
}Features
Built-in functionality
- Three variants: Badge, banner, and switch display modes
- Color coding: Amber for draft, emerald for live status
- Toggle support: Interactive mode switching
- Warning message: Banner variant shows publishing instructions
- Publish button: Banner includes action button when onToggle provided
- Dot indicator: Badge variant includes status dot
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Switch variant uses native Switch componentBadge is a static indicatorBanner publish button is a native button elementKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Focus switch or publish button |
| Enter / Space | Toggle switch or activate publish button |
Notes
- Status is communicated through text label (Draft/Live)
- Color provides additional visual distinction
- Warning icon in banner provides visual emphasis
- Switch state is reflected in label text