---
title: "VersionBadge — Free Framer component · Best of Framer"
description: "Free Framer component · by Spyridon Merkouris · Sections. Announcement pill with expandable change"
canonical: "https://framer.elliotli.dev/component/versionbadge"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/VersionBadge

# VersionBadge

Announcement pill with expandable change

[View on Framer](https://framer.com/marketplace/components/versionbadge/?via=elliot-li)

![VersionBadge preview image 1](https://framer.elliotli.dev/og/component/versionbadge/e207c851e18fa5a7/1600x1200.jpg)

## Summary

Announcement pill with expandable change

## Description

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #5226

## Details

- **Author**: Spyridon Merkouris
- **Published**: 2026-04-30
- **Updated**: 2026-04-30
- **Added**: 2026-04-17
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes