- Alignment. Labels are always vertically centered with adjacent texts, buttons, etc.
- Border-radius. Labels have a slight border-radius of 0.25em which is the default. For some cases - e.g. labels have no margin - you have a modifier ( .wui-label--angular) to reset the border-radius.
- Color. Default labels are highlighted in green ( #078390). But for specific status or if labels help users to differentiate between various objects they contain modifiers to change their color.
- Size. A label with default-size will fit into table-rows or input fields without influencing their heights. You can choose between 4 different sizes with the help of modifiers.
We use labels in different contexts and for different purposes, but they should still be consistent across the platform. The basic label comes with 3 different variations for:
- Text and icons
- Numbers
- Price labels
- wui-tags. Optically tags are very similar to labels. However, they differ slightly in function and HTML structure.
Stable
Feel free to use this component. It has been tested and is already live in production. Anyways – if you find a problem with this component let me know. You can contact me via slack, email (tjaeger@wescale.com) or personally.
Default wui label
Labels help users to quickly register the status of a particular item. For example the three different states - success, warning and danger - are shown in their usual colors - green, yellow and red. For further status colors have a look at the table below or at the wescale colors.
Example of default labels
| Label default | ||
| Label secondary with longer name | .wui-label--secondary | |
| Label success | .wui-label--success | |
| Label warning | .wui-label--warning | |
| Label danger | .wui-label--danger | |
| Default label with icon |
Labels among each other have the same width according to the widest. The size of labels in tables is limited to a width of 180px and than truncated with ellipsis - so better be concise when it comes to wording (see: Table).
Labels can also contain icons. Note when choosing a color - an unchecked option is not always dangerous or needs a warning. The impact on the users workflow by the activation of an option is made from case to case.
```html
Label default
```
```html
Label secondary
```
```html
Label success
```
```html
Label warning
```
```html
Label danger
```
```html
```
In addition to the modifiers for the color, there are a few more for the size. In tables we do not need these modifiers because we always use the default size there. But outside of tables, you can use the following size-modifiers for all different variations of labels:
.wui-label-size--sm .wui-label-size--lg and .wui-label-size--xlg
Number Labels
Labels with numbers are very similar to the default labels. The main difference is about the font-weight. Numbers are always bold. Furthermore it is not very common to have a big range of colors, because numbers usually don't show states. For the most cases you will have the label-green ( #078390). Except for labels that contain the number "0". These ones are grey ( #888).
Example of number labels
| 27 | .wui-label--number | |
| 0 | .wui-label--number .wui-label--muted |
Number labels are centered and have a min-width so that numbers of two digits have the same width than single-digit-labels.
```html
27
```
```html
0
```
Price labels
Price labels are a very special type of label for our domain. These labels are used exclusively for price information. Differences to the other tags are the missing border-radius which is set by .wui-label--angular. Modifiers for resizing can also be used together with the .wui-label--price. Because the price-labels are often used in other contexts, the sizes differ slightly from those of the other labels.
```html
EUR 312.95
```
Tags
Optically tags are very similar to labels. But in contrast to labels, tags are not set by the system to inform about a specific status. Tags could be set, written or changed directly by the users.
Keyboard control for a tag input
- Return. Confirms tag.
- Tab. Confirms tag and focuses the next element.
- Space (if not provided by respective tag). Confirms tag.
- Back-space. Deletes tag.
Example of input tags
Tags can be used in different scenarios. Sometimes they are restricted to a max number of characters or a specific character set like the tags for tenant codes.
```html
removable tag
```