Quick Demo
Quick Start
First, don't think of this component as just "an advanced button" - that mindset will limit your productivity with it.
Instead, think of it as: a call-to-attention widget that may or may not require user interaction.
If that sounds vague, don't worry - it'll become clear through the examples below. For now, it helps to know it can take the form of a button, badge, or toggle.
1️⃣ Button vs. Badge
Understanding the difference between button and badge is surprisingly important.
Compared to buttons, badges are typically flat, smaller, and non-interactive by default (that's what makes them badges).
Here are all possible variants and sizes:
Key takeaway: While they share the same variant and size API, the visual differences are clear. The badges shown here are interactive, which is fine for some designs - we'll show how to make them non-interactive later.
2️⃣ Icon (CTA)
From the previous section, you've seen that the default shape of Cta is a button, which you can override via the shapes prop. Currently, there are 4 options:
These are mostly self-explanatory, but worth noting: "icon" is considered a unique shape because it forces Cta to have equal width and height, earning its place in the shapes API.
3️⃣ Toggle
By default, Cta is stateless and won't remain pressed after being clicked. If you need this state persistence, that's where "toggle" comes in.
Enabling toggle behavior is straightforward - for example, to create a Cta that's initially pressed, just use the defaultPressed prop and it will manage the toggle state internally:
Using pressed and/or onPressedChangewill also make Cta a toggle:
4️⃣ Muted
Sometimes you need a Cta that's not interactive but also not disabled. That's exactly when to use the muted prop to make it non-interactive.
5️⃣ Wrapup
Since Cta is a call-to-attention widget, start by choosing what shapes you want, then decide its variant and size. Simple!
For more examples showing how versatile this component can be, check out the API reference page.