## Feature Examples ### Size - description:

Control the size of a component with size prop:

  • large - use when item height is >212 px.
  • medium - use when item height is between 162 px and 212 px.
  • small - use when item height is between 120 px and 162 px.
  • tiny (default) - use when item height is between 48 px and 120 px.

    • size prop affects component's padding and icon size. Its height and width also depend on a parent container.

    Minimum height of a component is:

  • 48 px for dashes,
  • 42 px for plain, and
  • 81×81 px for image themes.
    • - example: ```jsx Large Medium Small Tiny ; ``` ### Theme - description:

    Control the style of a component with theme prop:

  • dashes (default) - use it outside of a card, in a table or a list that contains images.
  • plain - use for in-card lists and tables that mainly consist of text.
  • filled - use for small in-card items, when a prominent call to action is needed.
  • image - use to add images inside a card.
    • - example: ```jsx Dashes Plain Filled Image ; ``` ### Alignment - description:

    Control content alignment with alignItems prop:

  • left
  • center (default)
  • right

    • Use left alignment with a plain component theme to maintain visual consistency with a remaining list inside a card.

    - example: ```jsx Left Center Right ; ``` ### Padding - description:

    Control whether a component has padding with removePadding prop.

    Use it in special cases only, when component is used in dense and narrow layouts.

    - example: ```jsx Default No padding ; ``` ### Border radius - description:

    Control the border radius of a component with borderRadius prop.

    By default, component has a corner radius of 8 px. Change it in custom scenarios, for example, when user needs to add a round avatar photo.

    - example: ```jsx ; ``` ### Title - description:

    Emphasize action with a title.

    If no title is shown, display it in a tooltip on item hover with tooltipContent prop.

    - example: ```jsx Title ; ``` ### Subtitle - description:

    Add a description below the title using subtitle prop.

    Use it to explain item details, such as a supported file format of a maximum allowed file size.

    - example: ```jsx Title; ``` ### Icon - description:

    Control a '+' icon visibility with showIcon prop. The icon is always shown by default.

    - example: ```jsx Default No icon ; ``` ### Custom icon or illustration - description:

    Override a default '+' icon with a custom icon or illustration by passing it to icon prop.

    Align dimensions of the icon or illustration based on add item size:

  • Use S2 illustrations in large and medium size components.
  • Use S1 for small size component.
  • Use 24×24 px or 18×18 px icons for tiny size component.
    • - example: ```jsx S2 } > Large S2 } > Medium S1 } > Small }> Tiny }> Tiny with small icon ; ``` ### Disabled - description:

    Disable all component interactions with disabled prop. Use it to show that no new item can be added to the list at a moment.

    - example: ```jsx Disabled; ``` ### Tooltip - description:

    Describe add item action with tooltipContent. Tooltip is shown when users hover on the item with a mouse.

    Control tooltip design with tooltipProps.

    - example: ```jsx Hover to see tooltip ; ``` ## Common Use Case Examples ### Inside a card - description:

    Use Add item to create a new item inside a card.

    When the list consists mainly of textual content, use plain theme and adjust component's alignment.

    - example: ```jsx () => { const records = [ { option: `Size`, vars: 'S, M, L', }, { option: `Colors`, vars: 'Black, Neutral, White', }, { option: 'Material', vars: 'Cotton, Eco leather', }, ]; const columns = [ { title: 'Option', render: (row) => row.option }, { title: 'Variations', render: (row) => row.vars }, ]; return ( Add New Option
    ); }; ``` ### Inside a page - description:

    Use Add item's dashed theme when component is placed directly inside of a layout.

    - example: ```jsx Get running! Scheduled for April 26, 2021 Public Join for Free Add New Event ; ``` ### Add images - description:

    Use Add item to upload images.

    For this, select image theme and show the title inside a tooltip on mouse hover.

    - example: ```jsx {}}> {({ openFileUploadDialog }) => ( )} ; ```