@wix/design-system
Version:
@wix/design-system
78 lines (51 loc) • 1.93 kB
Markdown
## Feature Examples
### Size
- description: Adjust the component size using `size` prop. It supports 4 sizes:<br/>
 - `large`<br/>
 - `medium`<br/>
 - `small`<br/>
 - `tiny`
- example:
```jsx
```
### Skin
- description: Control the skin of a component with `skin` prop. Is support 8 skins:<br/>
 - `standard` - use it to list selected/active values<br/>
 - `error` - use it to highlight an invalid value<br/>
 - `warning` - use it to highlight a value that can have an unexpected impact<br/>
 - `dark` - use it to show a value that represents a variable<br/>
 - `neutral` - use it when the tag needs minimal emphasis<br/>
 - `success` - use it to highlight confirmed values<br/>
 - `light` - use it on dark backgrounds<br/>
 - `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 `<Image/>`, `<Box/>`, icon or `<Avatar/>`.
- 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
```