Skip to content
Harness Design System

Language Dialog

The LanguageDialog component allows users to select and save their language preferences.

Usage

import { useState } from 'react';
import { LanguageDialog } from '@harnessio/ui/components';
function App() {
const [isOpen, setIsOpen] = useState(false);
const handleOpenChange = (open: boolean) => {
setIsOpen(open);
};
const handleChange = (language: LanguageInterface) => {
console.log(language);
};
const handleSave = (language: LanguageInterface) => {
console.log(language);
};
const handleCancel = () => {
console.log('Cancelled');
setIsOpen(false);
};
return (
<LanguageDialog
open={isOpen}
onOpenChange={handleOpenChange}
onChange={handleChange}
onSave={handleSave}
onCancel={handleCancel}
>
<button onClick={() => setIsOpen(true)}>Select Language</button>
</LanguageDialog>
);
}
export default App;