Component · Actions

Button

buttons trigger an action or a change. one primary action per view; everything else is secondary, ghost, or text so the hierarchy stays calm.

Anatomy

Save as default
1 host · .lucent-button carries variant + size
2 optional leading <lucent-icon>
3 inner .lucent-button__inner · label

Variants

Primary Secondary Ghost Danger Text

Playground

Save as default
variant
size
disabled
loading 
 
 
 
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 <Button> @design-foundry/lucent-react 
 Angular <lucent-button> @design-foundry/lucent 
 Web Components <lucent-button> @design-foundry/lucent-wc 
 Blazor <LucentButton> DesignFoundry.Lucent 
  
 
  
API
 
 
 
PropTypeDefaultDescription
  
 variant primary | secondary | ghost | on-glass | danger | text primary visual emphasis. one primary per view. 
 size xs | sm | md | lg md control density (height + padding). 
 loading boolean false shows a spinner; disables the button. 
 disabled boolean false 40% opacity, no pointer. 
 type button | submit | reset button native button type. 
 (children) slotted — label + optional leading <lucent-icon>. 
  
 
 
 
 
check_circleDo
 
keep one primary action per view; pair it with a ghost or secondary for the alternative.
 
 
 
cancelDon't
 
stack multiple primary buttons — it flattens hierarchy and adds noise.