Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

Label

Labels can be used to identify an element, show status to the user or to find content in the same category.

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-label

<div class="e-label">
  Lorem ipsum
</div>
<div class="e-label">
  Lorem ipsum
</div>
JavaScript
Copy JavaScript
Lorem ipsum

Variations

With close button
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-label">
  Lorem ipsum
  <div class="e-label__close"></div></div>
<div class="e-label">
  Lorem ipsum
  <div class="e-label__close"></div></div>
JavaScript
Copy JavaScript
Lorem ipsum

With icon
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div>
  <div class="e-label">
    <e-icon class="e-label__icon" icon="e-arrow-up" color="inherit" type="small"></e-icon>
    <e-numeric value="451523"></e-numeric>
  </div>
</div>
<div>
  <div class="e-label">
    <e-icon class="e-label__icon" icon="e-arrow-up" color="inherit" type="small"></e-icon>
    <e-numeric value="451523"></e-numeric>
  </div>
</div>
JavaScript
Copy JavaScript

Color variations

default
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-label-default

<div class="e-label e-label-default">
  Lorem ipsum
</div>
<div class="e-label e-label-default">
  Lorem ipsum
</div>
JavaScript
Copy JavaScript
Lorem ipsum

primary
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-label-primary

<div class="e-label e-label-primary">
  Lorem ipsum
</div>
<div class="e-label e-label-primary">
  Lorem ipsum
</div>
JavaScript
Copy JavaScript
Lorem ipsum

secondary
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-label-secondary

<div class="e-label e-label-secondary">
  Lorem ipsum
</div>
<div class="e-label e-label-secondary">
  Lorem ipsum
</div>
JavaScript
Copy JavaScript
Lorem ipsum

info
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-label-info

<div class="e-label e-label-info">
  Lorem ipsum
</div>
<div class="e-label e-label-info">
  Lorem ipsum
</div>
JavaScript
Copy JavaScript
Lorem ipsum

success
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-label-success

<div class="e-label e-label-success">
  Lorem ipsum
</div>
<div class="e-label e-label-success">
  Lorem ipsum
</div>
JavaScript
Copy JavaScript
Lorem ipsum

danger
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-label-danger

<div class="e-label e-label-danger">
  Lorem ipsum
</div>
<div class="e-label e-label-danger">
  Lorem ipsum
</div>
JavaScript
Copy JavaScript
Lorem ipsum

warning
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-label-warning

<div class="e-label e-label-warning">
  Lorem ipsum
</div>
<div class="e-label e-label-warning">
  Lorem ipsum
</div>
JavaScript
Copy JavaScript
Lorem ipsum

Product specific labels

AI
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-label-ai

<div class="e-label e-label-ai">
  AI
</div>
<div class="e-label e-label-ai">
  AI
</div>
JavaScript
Copy JavaScript
AI

Label

Labels can be used to identify an element, show status to the user or to find content in the same category.

## Best practices

Labels should:

  • Have clearly identifiable text, when using pre-defined ones, they shouldn't be too similar.
  • Support identification in other ways too, like color, position and tooltips.
  • Include a close button if they are removable, provide users an obvious way to reapply a label once removed.
  • Clearly indicate what the status is when used as a status identifier, and should be mapped to the component the status refers to.
  • Have capitalized words for built-in labels, these are easier to read.
  • Contain short expressions to make identification easier.