Preview

Code

                                                        
                                                        
                                                            <usln-label
                                                            label-text="Label"
                                                            color-palette="purple"
                                                            theme="light"
                                                        >
                                                        </usln-label>
                                                        
                                                            

Guidelines

Label is used to provide users with additional context about an item, when it impacts the item’s usage. It’s used in Portal, Editor, and Assistant.

Portal

Editor

Assistant

Content guideline

• Keep the label short and concise (1 word is recommended)
• Always use uppercase for visual impact

Colors

The label can use different colors with a subtle emphasis :

• Pink is usually used for "Beta"
• Purple is used to indicate "New" features
• Gray is used for "Default" status of items (e.g., in language settings)
• Use red and yellow with caution, as they can communicate error/warning to users

Behavior

When Label is added to an item, it’s static and has no additional states.

Placement

A label is always placed on the right of the item. We usualy put 8px between the label and the content, with at least a minimum spacing of 4px.

Do's and dont's