Small Toggle for React

Use sm when space is tight: a formatting bar that floats over selected text, a toolbar in a sidebar, or a table header with several view options. Keep it for secondary controls, and use the default size for the main toolbar of a page.

The Toggle sizes an icon for you (size-4 in most styles) unless the icon has its own size-* class, and that size reads well at sm. Going smaller, such as size-3, makes the icons hard to recognize, so leave the default in place.

They meet the 24 by 24 pixel minimum of WCAG 2.5.8 in every style, but they're well below the 44 pixel target recommended for touch, so they suit pointer-driven, desktop layouts best. On touch screens, use the default size or leave enough space between toggles that a tap can't hit the wrong one.

Use the Toggle Group with size="sm", as the Small Toggle Group example does: the size applies to every item, and the group handles pressed state and arrow-key navigation. Lower its spacing for a tighter row, or set it to 0 to join the items.

You can, and the Toggle widens to fit, but text makes a compact toolbar wide again. Small toggles work best icon-only, each with an aria-label such as "Toggle bold". If you need labels, the default size gives them more room.

Often, yes. Pick the size from the layout rather than resizing with classes: render size="sm" in the desktop toolbar and the default size where the toolbar is used on touch screens. Test both on real devices.