Back to Widget Patterns
v2.2CTA
Secondary Text CTA
Text-link CTA with optional icon, used as the less-prominent companion to a primary button. Always renders as an anchor; supports default, external, and chevron icons.
Live preview
Rendered with real component code. Each example demonstrates a documented variant.
React props
Configure the component via props in React or via attributes in HTML.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | required | Link text |
| href | string | required | Anchor destination; always renders an anchor element |
| icon | "arrow-right" | "chevron-right" | "external" | ReactNode | "none" | "arrow-right" | Trailing icon: built-in name, custom node, or "none" to suppress |
| size | "default" | "small" | "default" | Font and gap scale |
| className | string | undefined | Extra class for the root element |
HTML usage
The HTML variant uses the same shared styles and class names. Drop into any stack.
<link rel="stylesheet" href="path/to/secondary-text-cta/styles.css">
<!-- Default with arrow-right icon -->
<a class="stc" href="/pricing">
View pricing
<svg class="stc__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>
<!-- Small size, no icon -->
<a class="stc stc--small" href="/about">Learn more</a>
<!-- External link icon -->
<a class="stc" href="https://github.com/example" target="_blank" rel="noopener noreferrer">
Open on GitHub
<svg class="stc__icon" viewBox="0 0 16 16" aria-hidden="true">
<path d="M6 3H3a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-3M9 2h5v5M8 8l6-6"
stroke="currentColor" stroke-width="1.5" fill="none"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>Customization
Override these CSS custom properties to integrate the component into your brand.
.stc {
--stc-color: var(--brand-accent, #1e5fcf);
--stc-color-hover: color-mix(in srgb, var(--stc-color) 80%, black);
--stc-font-size: 1rem;
--stc-font-weight: 500;
--stc-gap: 0.375rem;
--stc-underline-offset: 2px;
}