MDK Logo
ReferenceUI KitReactUI Kit foundationComponentsSettings

HeaderControlsSettings

Settings panel for the global app header — toggle controls, sticky behaviour, and theme defaults.

Settings panel for the global app header — toggle controls, sticky behaviour, and theme defaults.

import { HeaderControlsSettings } from "@tetherto/mdk-react-devkit";
PropStatusTypeDefaultDescription
preferencesRequiredHeaderPreferences
isLoadingOptionalboolean | undefined
onToggleRequired(key: keyof HeaderPreferences, value: boolean) => void
onResetRequiredVoidFunction
classNameOptionalstring | undefined

Usage

Settings panel for configuring the global application header — toggle which controls are visible, sticky behaviour, and theme defaults.

Example

import { HeaderControlsSettings } from '@tetherto/mdk-react-devkit'export const HeaderControlsSettingsExample = () => (  <div className="mdk-example-row">    <HeaderControlsSettings      preferences={{ sticky: true, showTimezone: true } as never}      onToggle={(key, value) => console.warn(key, value)}      onReset={() => console.warn('reset')}    />  </div>)