feat: Toggleable icon buttons

[R2Boyo25]

Material 3 defines toggleable icon buttons with different appearances and icons depending on whether the icon button is toggled or not.

Currently I do not see a way of doing this without swapping out the button and/or using custom css.

It would be nice to have a ToggleButton with a selectedIcon and unselectedIcon (names taken from the M3 Figma), with a toggled boolean property that the developer can bind:toggled to.

[KTibow]

something like this would work no?

<Button type={selected ? "filed" : "elevated"} iconType="full">
<Icon icon={selected ? iconSettingsOutline : iconSettings} />
</Button>

[R2Boyo25]

something like this would work no?

<Button type={selected ? "filed" : "elevated"} iconType="full">
<Icon icon={selected ? iconSettingsOutline : iconSettings} />
</Button>

Material 3 uses special styles for the toggle buttons that are not 1:1 with any of the non-toggleable buttons.

[KTibow]

Huh. Since I'd like to keep the button minimal, I'd accept something that's CSS-only and changes the styles specifically for the full icon type. If you don't PR this I'll probably try soon.

[R2Boyo25]

Huh. Since I'd like to keep the button minimal, I'd accept something that's CSS-only and changes the styles specifically for the full icon type. If you don't PR this I'll probably try soon.

How would I make it CSS-only since it needs to be able to adjust the styling based on whether it's toggled or not? When it is selected, it uses the default icon-button styling for that icon button type, but when it is unselected it has a different style from the default.

Also: why do you have normal buttons and icon buttons in one component since they have different styling (Icon buttons do not have the elevated variant) and icon buttons have the toggleable variant.

[KTibow]

Buttons and icon buttons are close enough to be one component. The "elevated" style would correspond to the "unselected" style. The component doesn't need to care about the toggling, it just needs to care about what colors and what content to use.

[R2Boyo25]

When it is selected, it uses the default icon-button styling for that icon button type

Sorry, what I said earlier was wrong. This is incorrect for the outlined and standard variants, which change the background and icon color. (filled and tonal toggleable icon buttons only fill in the icon vs. the non-toggleable icon button).