Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/storefront/cta-group.

When to use it

Use CTAGroup below editorial or promotional copy when the layout needs one clear primary action and a lighter follow-up link.

Composition notes

The component only renders the actions that have both label and href values. buttonVariant lets you force the primary button treatment, while dark changes the default button behavior and link color for darker surfaces.

The row uses a wrapping flex layout, so the button and text link can break onto a second line without extra work when space gets tight. Keep labels short enough that the pair still reads as one action group instead of two unrelated controls.

Behavior and theming guidance

Keep the pair focused. This component works best with one strong button and one lighter text action, not a crowded row of competing choices.

Use dark when the group sits on a dark panel or image overlay so the default contrast stays correct. If a section needs more than two actions, switch to a custom layout rather than stretching CTAGroup beyond its intended role.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=CTAGroup.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes