
<div class="bg-surface-50-600 p-4 rounded-container flex flex-col justify-center items-center gap-2">
    <div class="flex gap-2 justify-center items-center">
        <button class="btn-primary btn-icon btn-lg">
            <span class="sr-only">Alarm</span>
            <span class="i-material-symbols:notifications-active-rounded" />
        </button>

        <button class="btn-border-surface-tl-primary-tertiary-error">
            <span class="i-material-symbols:notifications-active-rounded" />
            <span>Alarm</span>
        </button>
    </div>
    
    <div class="flex gap-2 justify-center items-center">
        <button class="btn-border-surface-bl-primary-secondary-success btn-icon">
            <span class="sr-only">Buy</span>
            <span class="i-material-symbols:add-shopping-cart-outline-rounded" />
        </button>

        <button class="btn-border-surface-tr-success-warning hover:(text-surface-900)">
            <span class="i-material-symbols:temp-preferences-eco-outline" />
            <span>Green</span>
        </button>
    </div>
</div>