# CtaGroup

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

```ts
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 stack="phone">
	<Button color="brand">{t("hero.cta")}</Button>
	<LinkButton href={docs} variant="surface">{t("hero.docs")}</LinkButton>
</CtaGroup>
```

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

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `size?` | `"sm" \| "md" \| "lg"` | Size handed to every action without its own. Defaults to DEFAULT_SIZE. |
| `stack?` | `"never" \| "phone"` | When the actions stack full width. Defaults to `"never"`. |
| `children` | `RemixNode` | 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. |