## Feature Examples
### Icon size
- description: Control plus icon size inside of a button:
- `small` (default) - use it when the button’s width is 30 pixels or smaller.
- `medium` - use it when the button's width is larger than 30 pixels.
- example:
```jsx
;
```
### Fill
- description: Set the button's fill-in HEX color or linear gradient. Component allows control of the gradient direction.
- example:
```jsx
;
```
### Disabled
- description: Restrict button interactions with `disabled` prop. This will prevent users from adding a new swatch.
- example:
```jsx
;
```
### Tooltip
- description: Explain the action with a message in a tooltip.
Control the tooltip position and behaviour by passing relevant properties via `tooltipProps`.
- example:
```jsx
;
```
### Icon
- description: Display a custom icon inside of a button using icon prop.
Default icon is a plus and is displayed all the time unless specified otherwise.
Overridden icon size cannot be controlled using `iconSize` property. Size has to be controlled manually.
- example:
```jsx
} tooltipContent="Edit"/>
;
```
## Common Use Case Examples
### Adding custom swatch
- description: Use a fill button to add new fill options to the existing list.
It’s recommended to place it as the first item on the list, because it won’t be moved down when new colors appear, letting the user always find it.
It can be used with `` to open a native file picker to upload images.
- example:
```jsx
() => {
const [selectedId, setSelectedId] = React.useState(0);
return (
{({ openFileUploadDialog }) => (
)}
setSelectedId(1)}
/>
setSelectedId(2)}
/>
setSelectedId(3)}
/>
);
};
```