Small Toggle Group for React

Use sm when space is tight: a toolbar that floats over selected text, a narrow sidebar, a popover editor or a table header. Keep the default size for the main toolbar of a page.

Because the options here combine: text can be bold, italic and underlined at once, so each item stays pressed on its own. Single selection, where pressing one item releases the others, is for options that exclude each other, like alignment.

At a small size, the border marks each item as a separate button, which helps when the icons are close together. The default variant, with no border, also works and suits a toolbar that already has its own frame.

The group's spacing sets the gap between items, 2 by default, whatever the size. Lower it for a tighter row, or set it to 0 to join the items into one bar where the outline borders are shared.

They meet the 24 pixel minimum of WCAG 2.5.8, but they're well under the 44 pixel touch target, so they suit pointer-driven layouts best. On touch screens, use the default size or keep enough spacing between items that a tap can't hit the wrong one.

The group is a single row that doesn't wrap, so too many items overflow their container. Keep the group short, add flex-wrap to the group's class, or set orientation="vertical" to stack the items.