Chip

a compact descriptor: a filter, a selection, or a removable token.

Example

DefaultActiveTagRemovable
<span class="lucent-chip lucent-chip--default lucent-chip--md">
  <span class="lucent-chip__label">Default</span>
</span>
<span class="lucent-chip lucent-chip--active lucent-chip--md">
  <span class="lucent-chip__label">Active</span>
</span>
<span class="lucent-chip lucent-chip--tag lucent-chip--md">
  <span class="lucent-icon lucent-icon--sm" aria-hidden="true">
    <span class="material-icons lucent-icon__glyph">tag</span>
  </span>
  <span class="lucent-chip__label">Tag</span>
</span>
<span class="lucent-chip lucent-chip--action lucent-chip--md">
  <span class="lucent-chip__label">Removable</span>
  <button type="button" class="lucent-chip__close" aria-label="Remove Removable" data-lucent-dismiss=".lucent-chip">
    <span class="lucent-icon lucent-icon--sm" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">close</span>
    </span>
  </button>
</span>

Playground

Design
type
size 
 
 
 
Using it
 
 
  
 Angular  lucent-chip 
import { LucentChip } from '@design-foundry/lucent-angular';
 		 
 
 Stylesheet  .lucent-chip 
@design-foundry/lucent-styles/core.css
 		 
  
 
  
API
 
 
 
NameKindTypeDefaultDescription
  
 type input tag | default | active | action default chip role. 
 size input xs | sm | md | lg md control density. 
 label input string '' chip text. 
 closed output void  emits when the remove button is pressed (action type). 
  
 
  
Theming
 
 
 
Color (11)
  
 
Size & spacing (13)
  
 
Border & radius (3)
  
 
Type (2)