Use the Switch Component to allow the user make a selection, which most often expresses turning on/off a configuration in a list of settings. The Switch is visually identical to the Ignite UI for Angular Switch Component

    Switch Demo

    Interaction State

    The Switch can be inserted in an enabled or disabled state.

    Layout Template

    In Figma and Sketch, the Switch supports label position variants where the Switch label is placed after or before the Switch element. In Adobe XD, we are using Stacks to allow you to change the label and switch positions at design time simply by dragging it to the left or right of the switch visual.


    The Switch provides on and off selection states. In Figma, you can select the properties from the right sidebar. In Sketch, this is achieved with Symbol Overrides, while in Adobe XD, we are using the Component States paradigm to let you easily switch between states.


    The Switch comes with styling flexibility through the available options for the Thumb and Track colors, as well as changing the Label text color.


    Use the same or very similar colors for the Switch Thumb and Track.

    Do Don't

    Additional Resources

    Related topic:

    Our community is active and always welcoming to new ideas.