Locale Switcher

Language/locale selection dropdown

Basic Usage

With flags

Selected: en

Without flags (globe icon)

Selected: en

Icon only (compact)

Selected: en

Button variants

Sizes

Installation

pnpm add @corew500/ui

Usage

import { LocaleSwitcher } from "@corew500/ui/locale-switcher"

<LocaleSwitcher>Content</LocaleSwitcher>

API Reference

Props

Prop	Type	Default	Description
`locales*`	Locale[]	—	Available locales to switch between
`value*`	string	—	Currently selected locale code
`onValueChange`	(locale: string) => void	—	Callback when locale changes
`showLabel`	enum	`true`	Show locale label in trigger button
`showFlag`	enum	`true`	Show flag emoji in trigger button
`ariaLabel`	string	`Select language`	Accessible label for screen readers
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`variant`	enum	`outline`	—
`size`	enum	`default`	—
`animated`	enum	`true`	Enable hover scale and active press micro-interactions. Uses motion-safe media query to respect user preferences.
`loading`	enum	`false`	Show loading spinner and disable the button. When true, replaces iconStart with a spinner and sets aria-busy.
`iconStart`	enum	—	Icon to display at the start (left) of the button text. Automatically hidden when loading is true.
`iconEnd`	enum	—	Icon to display at the end (right) of the button text. Remains visible during loading state.
`fullWidth`	enum	`false`	Make the button expand to fill its container width.
`glow`	enum	`false`	Enable animated gradient glow effect on hover. Adds decorative gradient lines below the button.
`focusableWhenDisabled`	enum	`false`	Whether the button should be focusable when disabled.
`nativeButton`	enum	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (e.g. `<div>`).
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Accessibility

Keyboard Navigation

Keyboard navigable via standard dropdown menu patterns

Screen Readers

- Button has aria-label for screen reader announcement
Flag emojis are decorative (aria-hidden)

Additional

Current selection is indicated both visually and via checkmark

Localization

Translatable Content

- Locale labels should be in their native language (e.g., "Français" not "French")
ariaLabel prop should be localized to current language

Additional

Flag emojis are optional and can be omitted