wix-style-react/src/Tag/docs/Tag.content.js

wix-style-react

export default {
  description:
    'A tag is a label used to categorize content or display an active selection that will be applied to a product or service.',
  do: [
    'Use it to label, categorize or organize content using descriptive keywords',
    'Use it to visualize selected values',
  ],
  dont: [
    'Don’t use it to display a number of items. Use <CounterBadge/> instead.',
    'Don’t use it to indicate status of an item. Use <Badge/> instead.',
  ],
  featureExamples: [
    {
      title: '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: '_size',
    },
    {
      title: 'Theme',
      description: `Control the skin of a component with \`theme\` prop. Is support 8 themes:<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: '_theme',
    },
    {
      title: 'Disabled',
      description: `Disable all interactions with \`disabled\` prop. Use it to highlight inactive values or values that can't be removed.`,
      example: '_disabled',
    },
    {
      title: '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: '_thumbnail',
    },
    {
      title: 'Remove Button',
      description: `Control whether a tag can be removed or not with \`removable\` prop.`,
      example: '_removeButton',
    },
    {
      title: '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: '_maxWidth',
    },
  ],
  commonUseCaseExamples: [
    {
      title: 'Content Categorization',
      description: `Use tags to visualize assigned categories or labels to a product. Usually applied via multi select dropdowns or popovers.`,
      example: '_contentCategorization',
    },
  ],
};