Badge

a small status indicator: an unread count, a short label ("AI"), or a bare presence dot.

Example

AI399+
<span class="lucent-badge lucent-badge--label lucent-badge--neutral">AI</span>
<span class="lucent-badge lucent-badge--count lucent-badge--accent">3</span>
<span class="lucent-badge lucent-badge--count lucent-badge--error">99+</span>
<span class="lucent-badge lucent-badge--dot lucent-badge--success" aria-hidden="true">
</span>

Playground

3
kind
variant 
 
 
 
Using it
 
 
  
 Angular  lucent-badge 
import { LucentBadge } from '@design-foundry/lucent-angular';
 		 
 
 Stylesheet  .lucent-badge 
@design-foundry/lucent-styles/core.css
 		 
  
 
  
API
 
 
 
NameKindTypeDefaultDescription
  
 variant input accent | error | success | neutral neutral colour axis. 
 kind input count | label | dot label shape and content. 
 label input string '' count or label text; ignored for dot. 
  
 
  
Theming
 
 
 
Color (7)
  
 
Size & spacing (4)
  
 
Border & radius (1)
  
 
Type (5)