CtaGroup

A horizontal cluster of primary and secondary landing actions that wraps onto a second row when the container is narrow.

Compare plans

See an example

View code

tsx

<CtaGroup>
	<Button color="brand" mix={[landingCtaChrome()]}>
		Start monitoring free
		<ArrowRightIcon />
	</Button>
	<LinkButton href="/examples/pricing" variant="surface" mix={[landingCtaChrome()]}>
		Compare plans
	</LinkButton>
</CtaGroup>

<CtaGroup size="sm">
	<LinkButton href="/examples/login" variant="ghost" color="neutral">Sign in</LinkButton>
	<LinkButton href="/examples/signup" color="brand">Start free</LinkButton>
</CtaGroup>

<CtaGroup stack="phone">
	<Button color="brand" mix={[landingCtaChrome()]}>Create a status page</Button>
	<LinkButton href="/examples/status" variant="surface" mix={[landingCtaChrome()]}>
		See an example
	</LinkButton>
</CtaGroup>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Or copy it into your project to edit it:

Terminal

sdxc ui add cta-group

Usage

typescript

import { CtaGroup } from "@sdxc/ui";

Lays action children in a wrapping inline-flex row with a compact gap so a primary and secondary CTA read as one cluster, and publishes its size to them. Radius stays on the buttons; override --ui-landing-cta-radius per brand for pill vs soft-rect corners through landingCtaChrome().

Examples

tsx

<CtaGroup size="sm">
	<LinkButton href={signin}>{t("nav.signin")}</LinkButton>
</CtaGroup>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`size`	`"sm" \| "md" \| "lg"`	No	Size handed to every action without its own. Defaults to DEFAULT_SIZE.
`stack`	`"never" \| "phone"`	No	When the actions stack full width. Defaults to `"never"`.
`children`	`RemixNode`	Yes	Action controls — typically a solid primary Button or LinkButton beside a `surface` or outline secondary. The group does not invent buttons of its own.

Also accepts everything in TagProps<"div">.

Types

Name	Values	What it decides
`Size`	`"sm" \| "md" \| "lg"`	Size every action without a `size` of its own renders at.
`Stack`	`"never" \| "phone"`	When the actions stack into full-width rows: never, or on a phone-width container (36rem and below), where two side-by-side CTAs would wrap unevenly.