Component · Messaging

Reference tag

an inline chip referencing a mention, component, resource, or token inside a message.

Example

Playground

kind 
 
 
 
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 <ReferenceTag> @design-foundry/lucent-react 
 Angular <lucent-reference-tag> @design-foundry/lucent 
 Web Components <lucent-reference-tag> @design-foundry/lucent-wc 
 Blazor <LucentReferenceTag> DesignFoundry.Lucent 
  
 
  
API
 
 
 
PropTypeDefaultDescription
  
 kind mention | component | token | resource mention reference type + default glyph. 
 label string — the reference text. 
 icon string — override the per-kind glyph. 
 swatch string — colour swatch (token kind).