Component · Messaging

Chat trigger

the floating action button that opens a chat panel, with an optional unread badge. pin it bottom-right in an app.

Example

Playground

unread 
 
 
 
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 <ChatTrigger> @design-foundry/lucent-react 
 Angular <lucent-chat-trigger> @design-foundry/lucent 
 Web Components <lucent-chat-trigger> @design-foundry/lucent-wc 
 Blazor <LucentChatTrigger> DesignFoundry.Lucent 
  
 
  
API
 
 
 
PropTypeDefaultDescription
  
 icon string forum the FAB glyph. 
 unread number 0 unread badge (0 = hidden). 
 label string Open chat accessible name. 
  
 
 
 
 
check_circleDo
 
anchor one to the bottom-right of the app; let the badge surface unread count.
 
 
 
cancelDon't
 
place several on a screen — it should be the single entry point to chat.