Toggle

<Toggle icon={<BoldIcon />} aria-label="Toggle bold" />

const [value, setValue] = useState<string | undefined>(undefined)

return (
  <ToggleGroup
    value={value}
    onChange={setValue}
    aria-label="Text formatting options"
  >
    <Toggle value="bold" icon={<BoldIcon />} aria-label="Toggle bold" />
    <Toggle value="italic" icon={<ItalicIcon />} aria-label="Toggle italic" />
    <Toggle
      value="underline"
      icon={<UnderlineIcon />}
      aria-label="Toggle underline"
    />
  </ToggleGroup>
)