Large Toggle for React

Use lg when there are few toggles and they're the main action, or when people use the screen with touch. Avoid it in dense toolbars, where the extra height and padding take space without helping.

A bigger target is easier to hit for people with limited dexterity and easier to see for people with low vision. In most styles, though, lg is still a little under the 44 pixel touch target, so on touch screens also leave space between toggles. The name and pressed state are announced the same at every size.

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

Yes, with the Toggle Group and size="lg", as the Large Toggle Group example does. Large items take more width, so keep a group to a few options, or set orientation="vertical" to stack them in a narrow space.

They have room for one. Add the text after the icon inside the Toggle, as the Toggle with Text example does, and drop the aria-label, since the text becomes the name. Labels help most in simplified interfaces for people who don't know the icons.

Usually not: the larger target helps most on touch screens, where fingers are less precise than a mouse. Scale down only if the toolbar no longer fits, and then prefer fewer toggles or a vertical layout over smaller ones.