KDS — Coconut Design System

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&times;</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>