Component · Primitives

Divider

the unified separator — a plain hairline rule, or a rule with centered label text.

Example

Playground

variant 
 
 
 
Where available
 
 
 ✓ React 
 ✓ Angular 
 ✓ Web Components 
 ✓ Blazor 
 ✓ Tokens 
 
 
Using it
 
the same component, named idiomatically per target. one CSS contract underneath, so they render identically.
 
 
 
TargetReferencePackage
  
 React <Divider> @design-foundry/lucent-react 
 Angular <lucent-divider> @design-foundry/lucent 
 Web Components <lucent-divider> @design-foundry/lucent-wc 
 Blazor <LucentDivider> DesignFoundry.Lucent 
  
 
  
API
 
 
 
PropTypeDefaultDescription
  
 variant plain | labeled plain hairline rule, or rule + centered label. 
 label string — centered text (labeled variant). 
  
 
 
 
 
check_circleDo
 
use the labeled variant to separate alternatives (e.g. "OR" between a form and an SSO button).
 
 
 
cancelDon't
 
stack dividers to add vertical space — reach for spacing tokens instead.