SecurityLevelBadge

SecurityLevelBadge communicates the sensitivity or trust level of content, systems, or documents. It is commonly used in trust centers, security whitepapers, and internal documentation portals.

• Token-driven styling
• Four standard security tiers
• Optional icon support
• Fully accessible

Basic Usage

<SecurityLevelBadge variant="confidential" />

confidential

All Variants

<SecurityLevelBadge variant="public" />
<SecurityLevelBadge variant="internal" />
<SecurityLevelBadge variant="confidential" />
<SecurityLevelBadge variant="restricted" />

publicinternalconfidentialrestricted

With Icon

<SecurityLevelBadge variant="confidential" icon="🔒" />
<SecurityLevelBadge variant="restricted" icon="🛡️" />

🔒confidential🛡️restricted

Props

Prop	Type	Default	Description
variant	'public' | 'internal' | 'confidential' | 'restricted'	'internal'	Security classification level
icon	ReactNode	—	Optional leading icon
className	string	—	Additional CSS classes
style	React.CSSProperties	—	Inline styles

Accessibility

• Uses role="status"
• High contrast text on dark surfaces
• WCAG AA compliant

Best Practices

• Use confidential for most internal security documentation.
• Always combine with clear surrounding text explaining handling requirements.

Related Components

• AccessLevelBadge
• DataClassification
• LegalNotice