Toggle with Text for React

No. The text inside the Toggle becomes its accessible name, and screen readers announce "Bold, toggle button" with its pressed state. An aria-label would replace the visible text for screen readers, so if you add one, make it start with the visible words, such as "Bold text", so voice control users can say what they see.

Yes. Put the text first and the icon second inside the Toggle; it's a flex row with a gap, so the spacing stays the same either way. The order follows the reading direction, so in a right-to-left layout the first child sits on the right.

Use a label when the icon isn't obvious, when the action is used rarely, or when the people using it are new to the tool. Icon-only toggles fit dense toolbars of familiar actions like bold and italic, as long as each has an aria-label.

The Toggle sizes an icon for its text (size-4 in most styles) unless the icon has its own size-* class. Give the icon size-5 for a larger icon, or add text-base to the Toggle for larger text, and keep the two in proportion. To change the whole control, set size to sm or lg.

Yes. Wrap the text in a span with sr-only md:not-sr-only: on small screens only the icon shows, but the text is still there for screen readers, so the Toggle keeps its name without an aria-label. From the md breakpoint up, the label appears next to the icon.

The Toggle doesn't wrap its content, so a long label makes the button wider and can push the toolbar out of its container. Keep labels to a word or two. If the text comes from data, set a maximum width on the Toggle and put the text in a span with truncate.