Theme Playground

Commerce

CartTrigger

Cart button for headers and utility bars with count state and open-close wiring.

Best for

header cart buttonsutility navigationmini cart toggles

Import

import { CartTrigger } from "@enadhq/enad-react-sdk/client/cart"

When to use it

Use CartTrigger anywhere the shell needs a clear cart entry point. It is most common in headers, sticky nav bars, and compact mobile utility rows.

The component works best when it is the single obvious cart action in the current shell.

Composition notes

CartTrigger is usually paired with CartDrawer. Keep the open state controlled from the shell so keyboard shortcuts, header actions, and backdrop close behavior all go through the same state path.

Behavior and theming guidance

Make sure the count and open state reflect live cart context. The trigger is small, so clarity matters more than decorative styling.

If the shell already has many utility actions, give the cart trigger enough spacing and contrast so the visitor can find it quickly.

Examples

Live examples you can edit directly in the sandbox.

1 example

Header trigger

Use the trigger in the shell and connect it to the same state as the cart drawer or other cart overlay.

Component Sets

Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.

Props

PropTypeDefaultDescription
isOpenboolean
No description yet.
onOpenChange(open: boolean) => void
No description yet.
labelsstring{}
No description yet.
classNamestring
No description yet.