## Feature Examples
### Size
- description: Adjust the component size using `size` prop. It supports 4 sizes:
- `large`
- `medium`
- `small`
- `tiny`
- example:
```jsx
```
### Skin
- description: Control the skin of a component with `skin` prop. Is support 8 skins:
- `standard` - use it to list selected/active values
- `error` - use it to highlight an invalid value
- `warning` - use it to highlight a value that can have an unexpected impact
- `dark` - use it to show a value that represents a variable
- `neutral` - use it when the tag needs minimal emphasis
- `success` - use it to highlight confirmed values
- `light` - use it on dark backgrounds
- `lightOutlined` - use it on light backgrounds when the tag needs minimal emphasis
- example:
```jsx
```
### Disabled
- description: Disable all interactions with `disabled` prop. Use it to highlight inactive values or values that can't be removed.
- example:
```jsx
```
### Thumbnail
- description: Give more context about the tag with a thumbnail placed in front of the text.
It usually contains ``, ``, icon or ``.
- example:
```jsx
```
### Remove Button
- description: Control whether a tag can be removed or not with `removable` prop.
- example:
```jsx
```
### Max Width
- description: Limit the width of a tag with `maxWidth` prop.
Hover over labels that exceed the specified width to reveal the full text in a tooltip.
- example:
```jsx
```
## Common Use Case Examples
### Content Categorization
- description: Use tags to visualize assigned categories or labels to a product. Usually applied via multi select dropdowns or popovers.
- example:
```jsx
```