VersionBadge: Free Buttons Component by Spyridon Merkouris

Marketplace Components Categories Buttons

Compact hero-section badge showing "New · v2.4 · What's new →" with pulsing dot. Works as a link or as an expandable dropdown revealing recent changes inline. The standard pattern used by Linear, Vercel, and Arc.

What it does

Version Badge is the compact "New · v2.4 · What's new" pill you see at the top of modern SaaS landing pages. Works in two modes: as a link pointing to your changelog, or as an expandable dropdown that reveals recent changes inline.

Features

Pulsing dot animation. Auto-bold version number. Customizable prefix, version, and label (any field can be hidden). Four icon states: arrow for links, chevron for dropdowns. Dropdown panel with customizable entries (version, date, title, description). Click-outside-to-close behavior. Pill or rounded-rectangle shape. Full color, typography, and padding control. Hover state with background shift.

How to use

Paste onto your canvas. Place in your hero section, typically above the main headline. Choose Link mode (set a URL) or Expandable mode (fill in the Changes array). Adjust colors to subtly fit your brand — light backgrounds on white sites, white-alpha on dark heroes.

Ideal for

SaaS hero sections, launch announcements, product update teasers, release notification bars, and any site that wants to signal "we're actively shipping" at a glance.