Back to Widget Patterns
v2.1CTA
Primary Button CTA
Solid-fill button containing direct action copy, positioned as the visual focal point. Implements the 'one clear action' pattern that drives conversion when one action is meaningfully more important than any other on the page.
Live preview
Rendered with real component code. Each example demonstrates a documented variant.
Default solid-fill
With icon
Outlined variant
Button mode (no href)
React props
Configure the component via props in React or via attributes in HTML.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | required | Button text |
| href | string | undefined | If set, renders an anchor; otherwise renders a button |
| variant | "solid" | "outlined" | "solid" | Visual treatment |
| shape | "rounded" | "pill" | "sharp" | "rounded" | Corner radius style |
| icon | string | ReactNode | undefined | Optional trailing icon |
| onClick | () => void | undefined | Click handler (button mode only) |
HTML usage
The HTML variant uses the same shared styles and class names. Drop into any stack.
<link rel="stylesheet" href="path/to/primary-button-cta/styles.css">
<!-- Default solid-fill -->
<a class="pbc pbc--solid pbc--rounded" href="/signup">Get started</a>
<!-- Outlined variant with icon -->
<a class="pbc pbc--outlined pbc--rounded pbc--with-icon" href="/pricing">
View pricing
<svg class="pbc__icon" viewBox="0 0 16 16" aria-hidden="true">
<path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" fill="none"/>
</svg>
</a>
<!-- Button mode for client-side actions -->
<button class="pbc pbc--solid pbc--rounded" type="button">Start trial</button>Customization
Override these CSS custom properties to integrate the component into your brand.
.pbc {
--pbc-bg-color: var(--brand-accent, #1e5fcf);
--pbc-text-color: white;
--pbc-border-color: var(--pbc-bg-color);
--pbc-bg-hover: color-mix(in srgb, var(--pbc-bg-color) 90%, black);
--pbc-radius: 0.5rem;
--pbc-padding-y: 0.75rem;
--pbc-padding-x: 1.5rem;
--pbc-font-size: 1rem;
--pbc-font-weight: 600;
--pbc-transition: 150ms ease;
}