KDS
Kitchen Display System components: order cards, timer states, priority indicators, bump actions, stats bar, and empty state for kitchen environments.
Order Cards
Live order cards with header, items & bump action
#042
Dine-in
2:30
1× Burger Classic
No onions, extra cheese
2× Frites L
1× Coca-Cola
#043
Takeaway
6:45
2× Wrap Poulet
Extra sauce
1× Salade César
2× Eau minérale
#044
Delivery
11:20
1× Menu Big Burger
Well done, no pickles
1× Nuggets x6
1× Dessert du jour
3× Coca-Cola
<div class="kds-order">
<div class="kds-order-header">
<span class="kds-order-number">#042</span>
<span class="kds-order-type">Dine-in</span>
<span class="kds-timer green">2:30</span>
</div>
<div class="kds-items">
<div class="kds-item">
<span class="kds-item-qty">1×</span> Burger Classic
<div class="kds-item-mod">No onions, extra cheese</div>
</div>
</div>
<button class="kds-bump-ready">Ready</button>
</div>Timer States
Green (< 5min), orange (5–10min), red flashing (> 10min)
2:30
6:45
11:20
<span class="kds-timer green">2:30</span>
<span class="kds-timer orange">6:45</span>
<span class="kds-timer red">11:20</span>Priority Indicators
Left border color indicates order priority
#050
Dine-in
1:15
1× Salade César
#051
Takeaway
7:30
2× Burger Classic
#052
Delivery
12:05
1× Menu Big Burger
<div class="kds-order priority-normal">...</div>
<div class="kds-order priority-rush">...</div>
<div class="kds-order priority-urgent">...</div>Bump Actions
Ready (green) and Recall (dim) bump buttons
<button class="kds-bump-ready">
<span class="material-symbols-outlined">check_circle</span> Ready
</button>
<button class="kds-bump-recall">
<span class="material-symbols-outlined">undo</span> Recall
</button>Stats Bar
Kitchen performance metrics bar
receipt_long Active: 8
avg_time Avg: 4:12
done_all Bumped: 34
volume_up
<div class="kds-stats">
<div class="kds-stat">
<span class="material-symbols-outlined">receipt_long</span>
Active: <strong>8</strong>
</div>
<div class="kds-stat">
<span class="material-symbols-outlined">avg_time</span>
Avg: <strong>4:12</strong>
</div>
<div class="kds-stat">
<span class="material-symbols-outlined">done_all</span>
Bumped: <strong>34</strong>
</div>
<div class="kds-sound-badge">
<span class="material-symbols-outlined">volume_up</span>
</div>
</div>Empty Kitchen
Empty state when no orders are pending
restaurant
All caught up!
No pending orders
<div class="kds-empty">
<span class="material-symbols-outlined">restaurant</span>
<div class="kds-empty-title">All caught up!</div>
<div class="kds-empty-desc">No pending orders</div>
</div>