nuxt-x-affiliate
Social Proof
Social-proof signal pills — "Trending", "Bought today", "{count} in stock".
Social Proof
The XAFSocialProof component renders a row of small social-proof pills — "🔥 Trending", "12 bought today", "Only 3 left in stock". Quick visual cues that build buyer urgency and trust. Two visual variants: pill (rounded) or badge (sharp-corner bordered).
Components
<XAFSocialProof />
<XAFSocialProof
layout="row"
variant="pill"
:signals="[
{ label: 'Trending', icon: '🔥' },
'12 bought today',
{ label: 'Only 3 left', icon: '⚡', count: 3 },
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
signals | (string | SocialProof)[] | required | Plain strings or { label, icon?, count? } objects. |
layout | 'row' | 'stacked' | 'row' | Horizontal flex row or vertical stack. |
variant | 'pill' | 'badge' | 'pill' | Visual variant. |
The default icon when none is provided is 🔥. Each signal renders with role="listitem" inside a role="list" parent for screen-reader friendliness.
AI Context
component: XAFSocialProof
package: "@xenterprises/nuxt-x-affiliate"
use-when: Social-proof signal pills — "Trending", "Bought today", "{count} in stock" — in row or stacked layout.