KITT

Pill

The Pill is a form element that helps the user to quickly reference specific metadata or event update via text input in the center of the design with color meaning.

Base Open in playground
Default
secondary
warning
alert
info
success
tertiary 
<div style="display: flex; flex-direction: column; gap: 16px">
<.pill >
  Default
</.pill>
<.pill type="secondary">
  secondary
</.pill>
<.pill type="warning">
  warning
</.pill>
<.pill type="alert">
  alert
</.pill>
<.pill type="info">
  info
</.pill>
<.pill type="success">
  success
</.pill>
<.pill type="tertiary">
  tertiary
</.pill>
</div>
Load Status Open in playground
Tendered
Available
unplanned
rejected
cancelled
booked
loaded
dispatched
arrived at stop
stop delivered
departed from stop
in transit
partially delivered
delivered
partially invoiced
invoiced 
<div style="display: flex; flex-direction: column; gap: 16px">
<.pill load_status="tendered" type="status">
  Tendered
</.pill>
<.pill load_status="available" type="status">
  Available
</.pill>
<.pill load_status="unplanned" type="status">
  unplanned
</.pill>
<.pill load_status="rejected" type="status">
  rejected
</.pill>
<.pill load_status="cancelled" type="status">
  cancelled
</.pill>
<.pill load_status="booked" type="status">
  booked
</.pill>
<.pill load_status="loaded" type="status">
  loaded
</.pill>
<.pill load_status="dispatched" type="status">
  dispatched
</.pill>
<.pill load_status="arrived_at_stop" type="status">
  arrived at stop
</.pill>
<.pill load_status="stop_delivered" type="status">
  stop delivered
</.pill>
<.pill load_status="departed_from_stop" type="status">
  departed from stop
</.pill>
<.pill load_status="in_transit" type="status">
  in transit
</.pill>
<.pill load_status="partially_delivered" type="status">
  partially delivered
</.pill>
<.pill load_status="delivered" type="status">
  delivered
</.pill>
<.pill load_status="partially_invoiced" type="status">
  partially invoiced
</.pill>
<.pill load_status="invoiced" type="status">
  invoiced
</.pill>
</div>