Preview

Code

                                                        
                                                        
                                                            <usln-button
                                                                is-loading="false"
                                                                type="primary"
                                                                label-text="Button Label"
                                                                size="medium"
                                                                theme="light"
                                                                is-disabled="false"
                                                                icon="folder"
                                                        >
                                                        </usln-button>
                                                        
                                                            

Usage guidelines

• Text buttons clearly communicate actions users can take to achieve a goal.
• We use them in forms, modals, panels, action bars, and menus.
• In forms, button size should match the size of form elements.
• For forms with a single button, buttons can take the width of the form fields, filling the container.
• Button groups should be aligned to the right. Button groups of 3 buttons should have the third button aligned to the left. Within a button group, the primary action button should be right-most.

Behaviour

• Buttons react on click with no delay.
• If the result of an action triggered by a button click cannot be displayed instantly, use the loading button variant until user can be moved on to the next step.
• If a button is disabled, display an infotip to inform users of the reason.

Do's and dont's

• Buttons are not links and should not be used as a purely navigational elements.

Content guidelines

• A button label should be clear and precisely describe the purpose of the button, or the action performed.
• Keep labels short, no more than 3 words.
• Avoid labels such as "Click here". Particularly in the context of Player, it is important that labels are meaningful when read out loud without surrounding text.
• In case of buttons used in Player, test for varying label length in different languages.

Variants

Primary

• For the single most important action that moves the task forward within a context.

Secondary

• For supplementary actions that the user can take.
• Use the Basic variant to additionally de-emphasize a secondary action.

Tertiary

• For less important actions available to the user, e.g. taking them outside of the main flow.
• Use the Basic variant to additionally de-emphasize a tertiary action.

Destructive buttons

• Primary destructive button: use when a destructive action is the presumed intent of the user, e.g. to confirm deletion.
• Secondary destructive button: use when a destructive action is one of multiple actions available to the user, e.g. when editing an entity.

Buttons with icons

• Add a left icon when you want to emphasize the purpose of the button.
• Add a right icon when you want to emphasize the action of the button.

Sizes

L

• For main CTAs and in most forms (when combined with L-size form elements) in the Portal

Minimum spacing for L-size buttons

M

• Main button size in Editor and Player.

Minimum spacing for M-size buttons

S

• For contained areas of limited size, e.g. the browser extension, date picker, "set as default" pattern.

Minimum spacing for S-size buttons