nuxt-x-marketing
SocialProofBadge
Trust badge with preset icons/labels (no-credit-card, cancel-anytime, secure, etc.) or custom icon and label.
SocialProofBadge
A compact inline trust signal. Use preset for one of eight built-in badges, or provide a custom icon and label. Designed to be used in groups near pricing cards, CTA buttons, or form fields.
Components
<XMarkSocialProofBadge />
A compact inline trust signal. Use preset for one of eight built-in badges, or provide a custom icon and label. Designed to be used in groups near pricing cards, CTA buttons, or form fields.
<!-- Using presets -->
<div class="flex gap-4">
<XMarkSocialProofBadge preset="no-credit-card" />
<XMarkSocialProofBadge preset="cancel-anytime" />
<XMarkSocialProofBadge preset="secure" />
</div>
<!-- Custom badge -->
<XMarkSocialProofBadge
icon="i-lucide-award"
label="G2 Leader 2025"
variant="subtle"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
preset | String | '' | Built-in preset: 'no-credit-card', 'cancel-anytime', 'free-trial', 'secure', 'support', 'setup', 'gdpr', 'money-back' |
icon | String | '' | Custom Lucide icon name (when not using a preset) |
label | String | '' | Custom label text (when not using a preset) |
variant | String | 'default' | Style variant: 'default', 'subtle', 'outline', 'text', 'text-muted' |
AI Context
category: SocialProof
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkSocialProofBadge
use-when: >
Adding compact trust signals adjacent to pricing cards, CTA buttons, or
form fields to reduce conversion friction. Use in groups of 2–4 badges.
typical-page-section: Directly below pricing cards, near CTA buttons, or beside form submit buttons.