# Label

[component-header:sl-label]

Labels are used to give text a visual context that matches use in forms etc. It ensures the correct margins and text sizes to fit in. It also never wraps but instead hides text overflow with ellipsis.

```html preview
<sl-label>This is where you enter a persons username</sl-label>

```

## Examples

### Sizes

Use the `size` prop to change a label's size.

```html preview
<sl-label size="small">Small</sl-label>
<sl-label size="medium">Medium</sl-label>
<sl-label size="large">Large</sl-label>
```

### Weights

Use the `weight` prop to change a label's weight.

```html preview
<sl-label weight="light">Light</sl-label>
<sl-label weight="normal">Normal</sl-label>
<sl-label weight="semibold">Semibold</sl-label>
<sl-label weight="bold">Bold</sl-label>
```

### Colors

Use the `color` prop to change a label's color.

```html preview
<sl-label color="blue">Blue</sl-label>
<sl-label color="red">Medium</sl-label>
<sl-label color="light">Light</sl-label>
<sl-label color="dark">Dark</sl-label>
```

### Multiline

Use the `multiline` prop allow a label to break over multiple lines.

```html preview
<sl-label size="x-small" multiline>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</sl-label>
<br>
<sl-label size="small" multiline>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</sl-label>
<br>
<sl-label multiline>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</sl-label>
<br>
<sl-label size="large" multiline>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</sl-label>
<br>
<sl-label size="x-large" multiline>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</sl-label>
```

[component-metadata:sl-label]