Reference tag

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

Example

@diegoButtonspec.pdfpine-50
<span class="lucent-reference-tag lucent-reference-tag--mention">
  <span class="lucent-icon lucent-icon--xs lucent-reference-tag__icon" aria-hidden="true">
    <span class="material-icons lucent-icon__glyph">alternate_email</span>
  </span>
  <span class="lucent-reference-tag__label">@diego</span>
</span>
<span class="lucent-reference-tag lucent-reference-tag--component">
  <span class="lucent-icon lucent-icon--xs lucent-reference-tag__icon" aria-hidden="true">
    <span class="material-icons lucent-icon__glyph">widgets</span>
  </span>
  <span class="lucent-reference-tag__label">Button</span>
</span>
<span class="lucent-reference-tag lucent-reference-tag--resource">
  <span class="lucent-icon lucent-icon--xs lucent-reference-tag__icon" aria-hidden="true">
    <span class="material-icons lucent-icon__glyph">description</span>
  </span>
  <span class="lucent-reference-tag__label">spec.pdf</span>
</span>
<span class="lucent-reference-tag lucent-reference-tag--token">
  <span class="lucent-reference-tag__swatch" style="background:#2f6f5b">
  </span>
  <span class="lucent-reference-tag__label">pine-50</span>
</span>

Playground

Button
kind 
 
 
 
Using it
 
 
  
 Angular  lucent-reference-tag 
import { LucentReferenceTag } from '@design-foundry/lucent-angular';
 		 
 
 Stylesheet  .lucent-reference-tag 
@design-foundry/lucent-styles/packs/messaging.css
 		 
  
 
  
API
 
 
 
NameKindTypeDefaultDescription
  
 kind input mention | component | token | resource mention reference type and default glyph. 
 label input string '' reference text. 
 icon input string '' overrides the per-kind glyph. 
 swatch input string '' colour swatch (token kind). 
  
 
  
Theming
 
 
 
Color (8)
  
 
Size & spacing (4)
  
 
Border & radius (2)
  
 
Type (5)