Toggle: what should always look the same, and what should be adjustable?

[lifeiscontent]

Hi @bhaveshraja, I'm firming up the single toggle (one on/off icon button, like a Bold button) in our kit and want to settle the defaults with you.

For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent), or whether it should be adjustable depending on where it's used?

1. The three sizes. It comes in small, medium, and large, and each size sets both the button and the icon inside it. Should those three be the full set, with medium as the everyday default?

2. The pressed look. When it's on, it gets a soft selected background and the icon turns to our stronger icon colour; when it's off it's see-through with the muted grey icon. On hover it lightly fills. Should that whole behaviour and those colours always be the same?

3. The shape. The button is a square with gently rounded corners. Should that always be the shape, or do you ever want a round one?

4. The disabled look. When it can't be used it dims to about 60% and stops responding. Should that always be how disabled reads?

This one's small, so even just confirming the sizes and the pressed look gets me most of the way. Anything you mark "always," I'll build in. Anything that's "depends," I'll leave open for the team. Thanks!

[bhaveshraja]

Based on the Figma design system (Toggle new component found in library):

Always the same

• Binary on/off states only
• Visual indicator clearly distinguishes on vs off (color, position, or both)
• Transition animation between states
• Focus ring style
• Click/tap target covers the full toggle area
• Height per size variant
• Keyboard: Space to toggle

Depends (adjustable)

• On/off state
• Size variant
• Disabled state
• Associated label (external)
• Variant style (switch-style vs button-style)