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.
<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>
<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>