UI kit reference

components/SwitchGlyph

Components#

Renders the on/off glyph: a track with a thumb. It is decoration only (aria-hidden); the control around it owns the state and the semantics.

TypeScript

function SwitchGlyph(props: SwitchGlyphProps): Element

Parameters
Name	Type	Description
props	`SwitchGlyphProps`	Component props.

Element

SwitchGlyph props
Name	Type	Description
className?	`string`	Extra classes on the root element.
on	`boolean`	Whether the switch is on: the accent fill with the thumb at the right.
size?	`'sm' \| 'md'`	Glyph size: `md` for settings rows, `sm` for menu rows and compact toggles.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

TypeScript

interface SwitchGlyphProps

SwitchGlyphProps properties
Name	Type	Description
className?	`string`	Extra classes on the root element.
on	`boolean`	Whether the switch is on: the accent fill with the thumb at the right.
size?	`'sm' \| 'md'`	Glyph size: `md` for settings rows, `sm` for menu rows and compact toggles.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.