nuxt-x-affiliate
Trust Badge
Small reassurance signal — 'No credit card required', 'GDPR compliant', '30-day money back' — with ten presets.
Trust Badge
A small trust signal. Distinct from <XAFSocialProof>, which renders urgency
signals ("🔥 2,341 bought this week") — this one renders reassurance signals.
Different job, different visual weight; both can appear on the same page.
Only claim what is actually true of the site or offer. A "30-day money back" badge
on a page linking to a merchant with no such policy is a deceptive claim, not decoration.
Components
<XAFTrustBadge />
<div class="flex flex-wrap gap-3">
<XAFTrustBadge preset="independently-tested" />
<XAFTrustBadge preset="money-back" variant="subtle" />
<XAFTrustBadge preset="gdpr" variant="outline" />
<XAFTrustBadge icon="i-lucide-recycle" label="Carbon neutral shipping" variant="text-muted" />
</div>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
preset | TrustBadgePreset | — | Supplies both icon and label |
icon | string | preset's icon | Iconify name, overriding the preset |
label | string | preset's label | Badge text, overriding the preset |
variant | 'default' | 'subtle' | 'outline' | 'text' | 'text-muted' | 'default' | Visual weight |
Presets
no-credit-card · cancel-anytime · free-trial · secure · support ·
setup · gdpr · money-back · free-shipping · independently-tested
Tips
- The two
textvariants carry no chip padding, so they sit inline in a sentence or under a pricing table without looking like buttons. - Used by
<XAFPricingPlans>and<XAFPricingComparison>for their badge rows.
AI Context
component: XAFTrustBadge
package: "@xenterprises/nuxt-x-affiliate"
use-when: Small trust or reassurance signal beside an offer