Large Toggle Group for React

Use lg when the group is the main control on the screen, when there are only a few options, or when people use it with touch: tablet editors, kiosks, presentation tools. Avoid it in dense toolbars, where the extra size takes room without helping.

Larger targets are easier to hit for people with limited dexterity and easier to see for people with low vision. In most styles lg is still a little under the 44 pixel touch target, so keep spacing between the items as well. The names and pressed states are announced the same at every size.

Each item is wider and taller than at the default size, and the group's spacing adds a gap between them. Three icon-only items fit easily even on a phone; with more, or with text labels, set orientation="vertical" or split the options into separate groups.

Not necessarily. The items keep the icon at its usual size (size-4 in most styles) and put the extra size into padding, which is what makes them easier to hit. If an icon looks lost, give it size-5, but don't let it fill the button.

Yes, they're the best fit of the three sizes for touch. The limit is width: keep the group to a few items, or stack it with orientation="vertical" on narrow screens.

Not if there's room. Large targets help desktop users with screen magnifiers or alternative pointing devices too. Choose the default size instead when the toolbar has many controls, and keep one size per toolbar.