Default Size Toggle Group for React

Use the default size for most toolbars. It matches the default height of Button and Input, so the group lines up with the controls around it. Go to sm in crowded or inline toolbars, and to lg when there are only a few items and they're the main controls.

The group's size defaults to md, and every item takes its size from the group, so leaving the prop out gives the default size. Set size on the group only for sm or lg.

Usually not, but check the targets. The default size meets the 24 pixel minimum of WCAG 2.5.8, while it's smaller than the 44 pixel touch target in most styles. Keeping the default spacing between items helps on touch screens; use size="lg" where touch is the main input.

Multiple, as here: bold, italic and underline combine, so each item should stay pressed independently. Use single selection for options that exclude each other, like text alignment in the Single Selection Toggle Group example.

Yes. Leave out variant="outline" and the items lose their border, appearing only on hover and when pressed, as in the Default Toggle Group example. Both variants work at every size.

Keep a group to a handful of related options, like the three text styles here. When a toolbar needs more, split it into several groups by purpose, such as text style, alignment and lists, rather than one long row.