Default Size Toggle for React

Use the default size unless you have a reason not to. It matches the default Button and Input heights, so a toggle lines up with the controls around it. Switch to sm when the toolbar is crowded or sits inside dense content, and to lg when there are only a few toggles and they're the main controls.

The Toggle's size defaults to md, so leaving it out gives the default size. Writing size="md" does the same and only adds noise; set size only for sm or lg.

They meet the 24 by 24 pixel minimum of WCAG 2.5.8, but in most styles they're smaller than the 44 pixel target recommended for touch. On touch-first screens, leave space between toggles or use size="lg", and test on a real device.

Yes. Put the text after the icon inside the Toggle, as the Toggle with Text example does; the Toggle grows to fit and keeps a gap between them. With visible text, the aria-label is no longer needed.

Use the Toggle Group, as the Default Size Toggle Group example does: it tracks which items are pressed, makes the row a single Tab stop with arrow-key navigation, and passes one size and variant to every item. Its spacing sets the gap between items, and 0 joins them into one bar.

No. Toggles of different heights in one row look misaligned and suggest a hierarchy that isn't there. Keep one size per toolbar, and use the variant, order or a separator to set groups of actions apart.