## 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
LargeMediumSmallTiny;
```
### 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
DashesPlainFilledImage;
```
### 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
DefaultNo 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;
```
### Subtitle placement
- description: Control where the subtitle appears with `subtitlePlacement` prop: - `bottom` (default) - shows the subtitle below the title. - `top` - shows the subtitle above the title. Use it when the description explains the action, and the title reads as the action itself.
- example:
```jsx
Title
Title
;
```
### Aligned items
- description: Line up the text of items placed side by side by giving every item an icon of the same height. An illustration passed as a source string is always rendered at a fixed size. Wrap a custom icon in a box of that size, for example 60×60 px for a `small` item.
- example:
```jsx
Upload
}
subtitle="Turn your photos into professional product shots"
subtitlePlacement="top"
>
Generate
;
```
### Icon
- description: Control a '+' icon visibility with `showIcon` prop. The icon is always shown by default.
- example:
```jsx
DefaultNo 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
PublicJoin for FreeAdd 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 }) => (
)}
;
```