Preview

Code

                                                        
                                                        
                                                            <usln-slide-toggle
                                                            active="true"
                                                            is-disabled="false"
                                                            theme="light"
                                                        >
                                                        </usln-slide-toggle>
                                                        
                                                            

Guidelines

Toggles are used to indicate two binary states (on/off, published/unpublished...), usually in the context of settings. We use them to manage options and settings within the Portal and Editor (e.g. activating languages or URLs).

Behaviour

• Toggles have one predefined default state.
• Change of a state is instant and doesn't require a confirmation button.
• The change of the state must be reflected in the UI by movement and color - the switch should change position and the color depending on the state. Active (positive) state should be clearly more prominent than the passive (negative) state.
• Whole component (label and the toggle) should be clickable.

Content

• Use labels that are short, direct, unambiguous and unchanging.
• When writing any toggle label, think of a question with a Yes/No answer, eg. (Is this guide) Public, or (Should we) Display notification dialog
• Avoid using labels inside the component.

Do's and dont's (needs visual examples)

• DO use it when the change is immediate, DON'T combine a toggle with a confirmation button.
• DO use toggles for states (turn on/off), DON'T use togges for actions (download).
• DO use toggle for binary (yes/no) states, DON'T use toggles for oppositional states (two different separate states connected to different user task - list view/table view).
• DO use a lable on the left side of the toggle, DON'T use a lable inside of the toggle.
• DO show the label always, DON'T change the label when the state changes (eg. Published and Unpublished).

Variants

We use two different types of toggle variants: disabled-inactive and disable-active. Both variants require a tooltip on hover to informs users why a toggle is disabled.

Disabled-inactive

We use this state to indicate an entity cannot be activated due to a condition not being fulfilled. For example: not possible to publish, when required fields in a specific language are not filled.

Disabled-active

We use this state to indicate an entity cannot be de-activated. Examples include: a language set as default in publishing options, the only valid app URL.

For more information on what can trigger a disabled-active, please see this document on entity activation: https://userlanerds.atlassian.net/wiki/spaces/ENGINEERIN/pages/2212528129/Entity+activation+and+default+entity+definition