---
title: "Locale Lang Toggle — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Mikiko Niwa · Buttons. Connect to Framer Locale for 2-language"
canonical: "https://framer.elliotli.dev/component/locale-lang-toggle"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Locale Lang Toggle

# Locale Lang Toggle

Connect to Framer Locale for 2-language

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

![Locale Lang Toggle preview image 1](https://framer.elliotli.dev/og/component/locale-lang-toggle/b3b67fdc2023d28e/1600x1200.jpg)

## Summary

Connect to Framer Locale for 2-language

## Description

![locale setting](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-7tdk1k0f-t1Nahg5QYCtEsbbHzOpp9DISheIYso)locale setting![Style - Solid / Floating and glass](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-tt0fvozm-QvpVxtsQF6DwGwltyjfAxPCZZXnahC)Style - Solid / Floating and glass

## Overview

Locale Language Toggle is a code component that integrates seamlessly with Framer's native localization feature. This toggle uses Framer's built-in Locale API, automatically syncing with your existing locale setup. No configuration per page, no manual URL mapping — just one component that works everywhere.

## Why This Component

This component gives you independent color customization for each style. Customize Glass colors without affecting Solid or Floating — complete design freedom across every variant.

## Features

-   Independent color palettes per style — a unique feature for true design flexibility
    
-   Direct Framer Locale integration — no per-page setup
    
-   80+ country flags auto-displayed
    
-   Three customizable styles: Glass, Solid, Floating
    
-   Three display modes: Flag + Text, Flag Only, Text Only
    
-   Smooth spring animation
    
-   Mobile responsive (44px minimum touch target)
    
-   ARIA-compliant for accessibility
    

## How It Works

1.  Place the component on your page
    
2.  Enter your Locale A ID (e.g., en)
    
3.  Enter your Locale B ID (e.g., es)
    
4.  Done — the toggle syncs with Framer's active locale automatically
    

## Requirements

Framer plan with Locales enabled (Basic or higher). Works with both manual translations and Auto Translate.

## Setup Tip

For **Glass** and **Floating** styles, set the parent frame's **Overflow** to "Visible" so shadows display correctly.

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

-   All · #3621

## Details

- **Author**: Mikiko Niwa
- **Price**: $12.00
- **Published**: 2026-05-29
- **Updated**: 2026-06-04
- **Added**: 2026-05-15
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything