Components

Toggle

A pressed-capable Button (Reka Toggle as-child): pressed paints the accent tint and keeps it on hover; pressedVariant="selected" uses the grey fill. Labels and tooltips can flip with the state.

Pressed looks

Accent (default): the accent tint (accent 12%) with accent ink; hover adds one accent layer. Selected: white 7.5% / black 10% with primary ink (the code session rail, measured live); hover adds one fill-button layer.

light

dark

Icon toggle with flipping label + shortcutHover or focus to see the tooltip switch between “Show files” and “Hide files”.

files: true

Selected variant

Sizes and content

Button sizes: xs 24 (message actions, icon 16), sm 28 (chat header, icon 20), default 28 (touch 32), lg 40. Labelled toggles take any Button content.

Thumbs (xs)

Sizes

Labelled