5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T783,

Language Toggle — Flag Switcher

A clean, animated language toggle that lets visitors switch between two languages with a single click. Perfect for bilingual websites, landing pages, and portfolios targeting international audiences.

Overview

Language Toggle displays two circular flag icons inside a smooth pill-shaped switch. The active language is highlighted with a subtle ring indicator, while the inactive one sits dimmed until selected. Drop it into your navbar, hero, or footer — it works anywhere.

Features

18 Built-in Languages — Choose each side of the toggle from a curated list of language variants, each with its matching flag: English (US), English (UK), Spanish (ES), Spanish (MX), Chinese Simplified (ZH), Hindi (HI), Arabic (AR), Portuguese (PT), French (FR), Russian (RU), German (DE), Japanese (JA), Korean (KO), Italian (IT), Polish (PL), Dutch (NL)

Fully Customizable Colors — Set the background color of the pill and the color of the toggle ring/indicator directly from the properties panel to match your brand or theme (light and dark modes both look great).

Smooth Interaction — Fluid toggle animation with a satisfying press feel. The active state transition is spring-animated for a native, polished touch.

Flexible Sizing — Scales responsively to fit navbars, mobile menus, or standalone placements without losing crispness.

Property Controls

Language A — dropdown (18 options)
Language B — dropdown (18 options)
Background Color — color picker
Toggle / Ring Color — color picker

Use Cases

Bilingual business sites, multilingual portfolios, international e-commerce, documentation sites, event pages — anywhere your audience speaks more than one language.

5a:[["$","$L5d",null,{"post":{"id":"019f24e6-b475-73a8-afdc-1fd45363fe95","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2d5212c8-f56d-4f1b-af20-40477abbda32","name":"THE SLIWA","slug":"thesliwa","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2d5212c8-f56d-4f1b-af20-40477abbda32/7jdenbut","followed":false,"followsYou":false},"media":[],"resources":[{"id":"DyFBhIM3yMamMdZPoOy5","resolved":true,"title":"Language Toggle - FL","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Language Toggle — Flag Switcher"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"A clean, animated language toggle that lets visitors switch between two languages with a single click. Perfect for bilingual websites, landing pages, and portfolios targeting international audiences."}]},{"type":"customHeading","content":[{"type":"text","text":"Overview"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Language Toggle displays two circular flag icons inside a smooth pill-shaped switch. The active language is highlighted with a subtle ring indicator, while the inactive one sits dimmed until selected. Drop it into your navbar, hero, or footer — it works anywhere."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"18 Built-in Languages","marks":[{"type":"bold"}]},{"type":"text","text":" — Choose each side of the toggle from a curated list of language variants, each with its matching flag: English (US), English (UK), Spanish (ES), Spanish (MX), Chinese Simplified (ZH), Hindi (HI), Arabic (AR), Portuguese (PT), French (FR), Russian (RU), German (DE), Japanese (JA), Korean (KO), Italian (IT), Polish (PL), Dutch (NL)"}]},{"type":"paragraph","content":[{"type":"text","text":"Fully Customizable Colors","marks":[{"type":"bold"}]},{"type":"text","text":" — Set the background color of the pill and the color of the toggle ring/indicator directly from the properties panel to match your brand or theme (light and dark modes both look great)."}]},{"type":"paragraph","content":[{"type":"text","text":"Smooth Interaction","marks":[{"type":"bold"}]},{"type":"text","text":" — Fluid toggle animation with a satisfying press feel. The active state transition is spring-animated for a native, polished touch."}]},{"type":"paragraph","content":[{"type":"text","text":"Flexible Sizing","marks":[{"type":"bold"}]},{"type":"text","text":" — Scales responsively to fit navbars, mobile menus, or standalone placements without losing crispness."}]},{"type":"customHeading","content":[{"type":"text","text":"Property Controls"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Language A — dropdown (18 options)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Language B — dropdown (18 options)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background Color — color picker"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Toggle / Ring Color — color picker"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Use Cases"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Bilingual business sites, multilingual portfolios, international e-commerce, documentation sites, event pages — anywhere your audience speaks more than one language."}]}]},"introduction":"Flag Switcher by THE SLIWA","slug":"language-toggle-fl","author":{"framerUserId":"2d5212c8-f56d-4f1b-af20-40477abbda32","name":"THE SLIWA","slug":"thesliwa","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2d5212c8-f56d-4f1b-af20-40477abbda32/7jdenbut","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2d5212c8-f56d-4f1b-af20-40477abbda32/5smcgfed","metadata":{"tint":{"h":0,"s":10,"l":16},"width":1800,"height":900}}],"post":null,"createdAt":"2026-07-02T22:15:27.045Z","updatedAt":"2026-07-02T22:15:27.045Z","publishedAt":"2026-07-02T22:15:27.042Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://fortuitous-personalization-729736.framer.app/","price":"5","paymentUrl":"https://contra.com/payment-link/qJTnkp8x-language-toggle-flag-switcher","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"RCOOjdPUlvk34mczSky5","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-02T22:15:27.093Z","updatedAt":"2026-07-02T22:15:27.093Z","reported":false}}],"$L5f"]

Suggested for you