Language Selector
Figma Component: 24680-458494
Last modified with commit 449aa34 on
by Sara Deric.
A dropdown popover component that allows users to select their preferred language for viewing the website. Displays available language options with flag icons and language names. Appears in the header as a button showing current language and a globe icon.
Functional Documentation
| Role | Scenario | Description |
|---|---|---|
| system | Display current language on button | Shows the current language code (e.g., "SI") and a globe icon on the language selector button in the header. Button styled as text-only variant. |
| system | Open language popover on click | When user clicks the language button, displays a dropdown popover with list of available language options. |
| system | Show language options with flags | Each language option in the popover shows a flag icon and the language name in that language (e.g., "Slovenščina", "English"). |
| system | Close popover after selection | When user selects a language from the popover, closes the dropdown and switches site language to selected option. |
| user | Switch language | User clicks the language button in header, reviews available languages in the popover, and clicks their preferred language to switch the site content. |
| user | View current language | User can see which language is currently active by viewing the language code displayed on the language button (e.g., "SI" for Slovenščina). |
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |
Popover (Variant)
| Value | Example |
|---|---|
| Other languages |  |