@wix/design-system/dist/docs/components/TagExamples.md

@wix/design-system

## Feature Examples


### Size
- description: Adjust the component size using `size` prop. It supports 4 sizes:<br/>
        &emsp;- `large`<br/>
        &emsp;- `medium`<br/>
        &emsp;- `small`<br/>
        &emsp;- `tiny`
- example: 
```jsx 
<StorybookComponents.Stack>
  <Tag size="large">Large</Tag>
  <Tag size="medium">Medium</Tag>
  <Tag size="small">Small</Tag>
  <Tag size="tiny">Tiny</Tag>
</StorybookComponents.Stack>;
```

### Skin
- description: Control the skin of a component with `skin` prop. Is support 8 skins:<br/>
        &emsp;- `standard` - use it to list selected/active values<br/>
        &emsp;- `error` - use it to highlight an invalid value<br/>
        &emsp;- `warning` - use it to highlight a value that can have an unexpected impact<br/>
        &emsp;- `dark` - use it to show a value that represents a variable<br/>
        &emsp;- `neutral` - use it when the tag needs minimal emphasis<br/>
        &emsp;- `success` - use it to highlight confirmed values<br/>
        &emsp;- `light` - use it on dark backgrounds<br/>
        &emsp;- `lightOutlined` - use it on light backgrounds when the tag needs minimal emphasis
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column" gap="18px">
  <StorybookComponents.Stack>
    <Tag skin="standard">Standard</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag skin="error">Error</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag skin="warning">Warning</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag skin="dark">Dark</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag skin="neutral">Neutral</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag skin="success">Success</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag skin="light">Light</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag skin="lightOutlined">Light Outlined</Tag>
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
```

### Disabled
- description: Disable all interactions with `disabled` prop. Use it to highlight inactive values or values that can't be removed.
- example: 
```jsx 
<Tag disabled>Disabled</Tag>;
```

### 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 
<Tag thumb={<Image src="example.jpg" />}>Image thumbnail</Tag>;
```

### Remove Button
- description: Control whether a tag can be removed or not with `removable` prop.
- example: 
```jsx 
<StorybookComponents.Stack>
  <Tag>Removable</Tag>
  <Tag removable={false}>Not removable</Tag>
</StorybookComponents.Stack>;
```

### 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 
<Tag maxWidth={240}>Hover to see the full label in a tooltip</Tag>;
```




    


## 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 
() => {
  const [checklistShown, setChecklistShown] = React.useState(false);
  const [tagList, setTagList] = React.useState([
    { id: 0, title: 'New collection', shown: true },
    { id: 1, title: "Women's clothing", shown: true },
    { id: 2, title: "Men's clothing", shown: false },
    { id: 3, title: 'Jacket', shown: true },
    { id: 4, title: 'Outerwear', shown: true },
    { id: 5, title: 'Sustainable', shown: false },
  ]);

  const toggleTag = (id, value) =>
    setTagList(
      tagList.map(item => (item.id === id ? { ...item, shown: value } : item)),
    );

  return (
    <Card>
      <Card.Content>
        <Box direction="vertical" gap="24px">
          <Box align="space-between">
            <Text weight="bold">Labels</Text>
            <Popover
              showArrow
              shown={checklistShown}
              appendTo="window"
              onClickOutside={() => setChecklistShown(false)}
            >
              <Popover.Element>
                <TextButton onClick={() => setChecklistShown(!checklistShown)}>
                  Add
                </TextButton>
              </Popover.Element>
              <Popover.Content>
                <Box direction="vertical" borderRadius="8px" padding="12px 0">
                  {tagList.map(({ id, title, shown }) => (
                    <ListItemSelect
                      checkbox
                      selected={shown}
                      title={title}
                      onClick={() => toggleTag(id, !shown)}
                    />
                  ))}
                </Box>
              </Popover.Content>
            </Popover>
          </Box>
          <Box gap="6px" flexWrap="wrap">
            {tagList.map(({ id, title, shown }) =>
              shown ? (
                <Tag onRemove={() => toggleTag(id, !shown)}>{title}</Tag>
              ) : null,
            )}
          </Box>
        </Box>
      </Card.Content>
    </Card>
  );
};
```