## Feature Examples

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

### 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
<StorybookComponents.Stack flexDirection="column" gap="18px">
  <StorybookComponents.Stack>
    <Tag id="skin-standard" skin="standard">Standard</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag id="skin-error" skin="error">Error</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag id="skin-warning" skin="warning">Warning</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag id="skin-dark" skin="dark">Dark</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag id="skin-neutral" skin="neutral">Neutral</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag id="skin-success" skin="success">Success</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag id="skin-light" skin="light">Light</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag id="skin-lightOutlined" 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 id="disabled" 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 id="image-thumbnail" 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 id="removable">Removable</Tag>
  <Tag id="not-removable" 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 id="max-width" 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 id={String(id)} onRemove={() => toggleTag(id, !shown)}>
                  {title}
                </Tag>
              ) : null,
            )}
          </Box>
        </Box>
      </Card.Content>
    </Card>
  );
};
```