...
Generally speaking, Block classes are used to visually style the component and its child elements and not define any placement styles within its parent container.
Block class names should match the React component name.
Elements:
There are 3 Elements above – the two icon Elements and the span tag containing the button's text. While the icons are components and therefore are Blocks in their own right, they are also Elements from the buttons perspective, so they receive Element class names as well:
...
Modifiers can also be used for component state changes like .Button___toggled when a button is toggled to apply different visual styling when that state is triggered. That said, I also personally like to use HTML attributes can also be used for consistency to indicate state changes as some html elements already have state attributes. Eg. [disabled] or [data-toggled="true"] or ...