Font size toggle

A compact small / medium / large control for changing the product root font size. The default 12px, 14px and 16px presets scale Flab's rem-based typography while the provider persists the choice.

Default

The default scale is small 12px, medium 14px and large 16px, with medium selected when there is no stored preference. Arrow keys move through the choices; Home and End jump to the first and last option.

<FontSizeToggle />

Custom labels

Visible option text defaults to S, M and L. Supply localized or product-specific labels without changing the preset values or accessible descriptions.

<FontSizeToggle labels={{ small: '小', medium: '中', large: '大' }} />

Setup and configuration

Wrap the app in FontSizeProvider and pass the same defaults to fontSizeInitScript in the document head. Override any size with a positive pixel number; omitted values keep Flab's defaults.

import { FontSizeProvider, FontSizeToggle } from '@flabbergasted-ai/react';import { fontSizeInitScript } from '@flabbergasted-ai/react/font-size-script';
const sizes = { small: 12, medium: 14, large: 16 };
// In the document <head>:<script dangerouslySetInnerHTML={{  __html: fontSizeInitScript('medium', sizes),}} />
// Around the app:<FontSizeProvider defaultPreset="medium" sizes={sizes}>  <FontSizeToggle /></FontSizeProvider>

Toggle props

Prop	Type	Default	Notes
`aria-label`	`string`	`'Font size'`	Accessible label for the radiogroup.
`labels`	`Partial<Record<'small' \| 'medium' \| 'large', string>>`	`{ small: 'S', medium: 'M', large: 'L' }`	Visible text for each preset; useful for localization.
`className`	`string`	—	Merged onto the pill container for layout overrides.

Provider props

Prop	Type	Default	Notes
`defaultPreset`	`'small' \| 'medium' \| 'large'`	`'medium'`	Initial choice used when storage has no valid preference.
`sizes`	`Partial<FontSizeValues>`	`{ small: 12, medium: 14, large: 16 }`	Positive pixel values for the three presets.
`children`	`ReactNode`	—	Application subtree that can consume the preference.