Status tag

a pill badge on the status (severity) axis, distinct from action tone.

Example

LiveDraftExpiringFailed
<span class="lucent-status-tag lucent-status-tag--success">
  <span>Live</span>
</span>
<span class="lucent-status-tag lucent-status-tag--neutral">
  <span>Draft</span>
</span>
<span class="lucent-status-tag lucent-status-tag--warning">
  <span>Expiring</span>
</span>
<span class="lucent-status-tag lucent-status-tag--error">
  <span>Failed</span>
</span>

Playground

Status
variant 
 
 
 
Using it
 
 
  
 Angular  lucent-status-tag 
import { LucentStatusTag } from '@design-foundry/lucent-angular';
 		 
 
 Stylesheet  .lucent-status-tag 
@design-foundry/lucent-styles/core.css
 		 
  
 
  
API
 
 
 
NameKindTypeDefaultDescription
  
 variant input success | neutral | warning | error success severity colour. 
 label input string '' badge text. 
  
 
  
Theming
 
 
 
Color (8)
  
 
Size & spacing (4)
  
 
Border & radius (1)
  
 
Type (3)