POS Touch — Coconut Design System

Product Grid

Product tiles with image, name & price

Burger Classic

8.90€

Frites L

3.50€

Coca-Cola

2.90€

Salade César

7.50€

Wrap Poulet

6.90€

Dessert du jour

4.50€

<div class="pos-product">
    <img src="burger.jpg" alt="Burger Classic">
    <div class="pos-product-name">Burger Classic</div>
    <div class="pos-product-price">8.90&euro;</div>
</div>

Category Tabs

Scrollable category row with icons

<button class="pos-category active">
    <span class="material-symbols-outlined">lunch_dining</span> Burgers
</button>
<button class="pos-category">
    <span class="material-symbols-outlined">side_navigation</span> Sides
</button>
<button class="pos-category">
    <span class="material-symbols-outlined">local_cafe</span> Drinks
</button>

Cart

Cart with items, quantity stepper & total

shopping_cart Current Order 2 items

Burger Classic

8.90€

1

Coca-Cola

2.90€

2

Total 14.70€

<div class="pos-cart-header">
    <span class="material-symbols-outlined">shopping_cart</span>
    Current Order
</div>

<div class="pos-cart-item">
    <div>
        <div>Burger Classic</div>
        <div>8.90&euro;</div>
    </div>
    <div class="pos-qty">
        <button class="pos-qty-btn">-</button>
        <span class="pos-qty-value">1</span>
        <button class="pos-qty-btn">+</button>
    </div>
</div>

<div class="pos-total">
    <span>Total</span>
    <span>14.70&euro;</span>
</div>

<button class="pos-pay-btn">Pay Now</button>

Numpad

3×4 numpad with accent OK button

<div class="pos-numpad">
    <button class="pos-numpad-btn">1</button>
    <button class="pos-numpad-btn">2</button>
    <button class="pos-numpad-btn">3</button>
    <!-- ... 4-9, 00, 0 ... -->
    <button class="pos-numpad-btn"><span class="material-symbols-outlined">backspace</span></button>
    <button class="pos-numpad-btn accent">OK</button>
</div>

Quick Actions Bar

Contextual action buttons

<div class="pos-quickbar">
    <button class="pos-quick-btn">
        <span class="material-symbols-outlined">percent</span> Discount
    </button>
    <button class="pos-quick-btn">
        <span class="material-symbols-outlined">sticky_note_2</span> Notes
    </button>
    <button class="pos-quick-btn">
        <span class="material-symbols-outlined">call_split</span> Split
    </button>
    <button class="pos-quick-btn">
        <span class="material-symbols-outlined">cancel</span> Cancel
    </button>
</div>

Payment Methods

Payment type selection tiles

credit_card Credit Card

payments Cash

phone_android Mobile

<div class="pos-payment-method">
    <span class="material-symbols-outlined">credit_card</span>
    <span>Credit Card</span>
</div>
<div class="pos-payment-method">
    <span class="material-symbols-outlined">payments</span>
    <span>Cash</span>
</div>
<div class="pos-payment-method">
    <span class="material-symbols-outlined">phone_android</span>
    <span>Mobile</span>
</div>