os-cart-button (Cart Button)

What it is

os-cart-button renders a cart icon button and shows the current cart item count badge when items exist.

Tag name

os-cart-button (Cart Button)

Attributes / parameters

None.

Usage

HTML

index.html

<os-cart-button></os-cart-button>

Webflow

Embed block

<os-cart-button></os-cart-button>

React

Header.jsx

export function Header() {
    return <os-cart-button></os-cart-button>;
}

Screenshot

Styling (CSS variables)

These are in addition to the global tokens inherited by every component.

CSS variable	Default
--os-cart-button-bg	transparent
--os-cart-button-color	var(--os-foreground)
--os-cart-item-count-bg	var(--os-primary)
--os-cart-item-count-color	var(--os-primary-foreground)

Related components

Cart Slideout The panel this button opens — drop both onto your page.

Single Product Card Products that add items to the cart this button toggles.