Dual Action CTA Block for React

The two buttons sit in a Button Group, which squares their touching corners and joins them with a thin divider. The first one is a link to your main route. The chevron is the trigger of a menu: it opens with a click, Enter, Space or the Down arrow, lists the other routes, and closes with Escape or a click elsewhere, returning focus to the chevron. The chevron has its own name, "More ways to get started", so a screen reader never meets an unlabelled button. Both halves are Shine Buttons, so the light sweeps each of them when it's hovered or focused.

Edit ROUTES at the top of the file: each entry has a label, an icon and an href, and the menu is built from the list, so adding or removing a route is one line. Every item is a real link that opens on Enter or a click and is reachable with the arrow keys; point them at your sign-up, install docs and contact pages. Each item renders the link it's given with render.

The spine is a Guides with the top rule and plus marks. The divider is the end cell's start border, and a second Guides puts a plus mark where it meets the top rule. Both are solid hairlines. Below md the divider and its mark are hidden, because the parts stack.

Yes. Neither the block nor the menu forces a scheme. A menu opens in a portal outside the block, so it takes its colours from the page's theme, and it's light on a light page and dark on a dark one.

The headline steps down from text-5xl to text-3xl, the split button sits under the text and is only as wide as its two parts, so it stays on one line down to 320 px, well inside the first screen. The menu is as wide as its longest label, opens below the chevron and moves to stay inside the screen. In a right-to-left layout the chevron sits on the opposite side of the main link, and the menu opens from that side.

Use it when one route is right for most visitors and the others are exceptions: the main button keeps all the attention and the alternatives stay one click away. When two actions are equals, such as a trial and a demo, two buttons side by side, like in Dark Icon Accent, read more honestly.